Next.jsReact

Next.js: params / searchParams should be awaited

Route "/[slug]" used `params.slug`. `params` should be awaited before using its properties.

In short: In the App Router from Next.js 15 on, params and searchParams are Promises. Reading params.slug without await gives you undefined, and sometimes no error at all.

Why it happens

Next.js 15 made params and searchParams async in pages, layouts, and route handlers so the framework can prepare them later in the render. AI-generated code still types the page as { params: { slug: string } } and reads params.slug synchronously. In a Server Component the usual console message is that params should be awaited. In some cases the page just renders undefined in place of the slug and TypeScript stays quiet if the type was written the old way. Client Components should not await in the component body; they use React.use(params) instead.

How to fix it

1. Open the page, layout, or route handler named in the error. Change the prop type to params: Promise<{ slug: string }> (use your real keys) and, in a Server Component or route handler, const { slug } = await params;. Do the same for searchParams if you read query strings there.
2. In a Client Component, do not await in the function body. Use const { slug } = use(params); from React, and keep the file marked "use client".
3. Update generateMetadata and any helper that receives params the same way: those functions are async, so they should await params too.
4. Search the repo for leftover params. and searchParams. reads in app/ and fix them one file at a time. A type of { params: { slug: string } } is the old shape and will hide the bug from TypeScript.
5. Rebuild and open a real URL such as /blog/hello. The slug should appear, and the await warning should be gone.

Example

type Props = { params: Promise<{ slug: string }> };

export default async function Page({ params }: Props) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

// Client Component: import { use } from "react";
// const { slug } = use(params);

Copy-paste fix prompt

I'm getting this error in my app:

Route "/[slug]" used `params.slug`. `params` should be awaited before using its properties.

[Paste the full error, stack trace, and the file it points to here]

Likely cause: In the App Router from Next.js 15 on, params and searchParams are Promises. Reading params.slug without await gives you undefined, and sometimes no error at all.

Task: Find every App Router page, layout, generateMetadata, and route handler that reads params or searchParams. Type them as Promise and await (or React.use in Client Components) before reading properties like slug. Don't keep the old `{ params: { slug: string } }` type.

Rules:
- First explain the root cause in 2 sentences and list the files you'll change.
- Make the smallest change that fixes it. Don't refactor unrelated code.
- Don't disable security or checks (RLS, auth, signature verification, type checking, CORS allow-all) to make the error disappear.
- Never print or hard-code secret keys.
- Finish by telling me exactly how to verify the fix.

Common with: Cursor, v0, Claude Code, Codex. Last reviewed 2026-11-15.