Next.js App Router — params not available in client component

A Next.js client component receives params as a Promise in App Router 15+ but uses it synchronously, causing "params is not a function" or undefined access.

intermediatedebuggingnextjsapp-router

Symptoms

TypeError: params is not a function
params.id is undefined in a client component
Works in Pages Router but not App Router

Possible causes

The component is marked "use client" but treats params as a sync object
Next.js 15 changed params and searchParams to be async in page components
The component was migrated from Pages Router without updating params usage

Diagnosis steps

Check the Next.js version

npx next --version

Interpretation

Next.js 15+ makes params a Promise; older versions pass it synchronously.

Inspect the component

grep -n "params" app/page.tsx

Interpretation

See if params is accessed without await.

Root cause

Next.js 15 App Router changed page props so params and searchParams are now Promises that must be awaited, but the component code still treats them as synchronous objects.

Fix

Await params in the page component: const { id } = await params; or use React.use() for client components. For static generation, use generateStaticParams.

Verify the fix

Build the app and navigate to the page; confirm params are correctly accessible and the page renders without errors.

Symptom walkthrough

A Next.js client component receives params as a Promise in App Router 15+ but uses it synchronously, causing “params is not a function” or undefined access. The error appears in production but may not surface in local development because the conditions that trigger it depend on the deployment environment or runtime configuration. Understanding the full symptom set helps distinguish this issue from similar errors.

Diagnosis in practice

Follow the diagnosis steps in the frontmatter to isolate the cause. Each step includes a command and an interpretation of the output. The goal is to narrow down whether the issue is in the configuration, the runtime, or the application code. Reproduce the error in a minimal setup before applying a fix.

Root cause

Next.js 15 App Router changed page props so params and searchParams are now Promises that must be awaited, but the component code still treats them as synchronous objects.

Fix

Await params in the page component: const { id } = await params; or use React.use() for client components. For static generation, use generateStaticParams. After applying the fix, monitor the system to confirm the error does not recur under load or in different environments.

Verification

Build the app and navigate to the page; confirm params are correctly accessible and the page renders without errors. If the verification passes, the fix is confirmed; if not, re-examine the diagnosis steps for missed contributing factors.

Diagnostic commands

Run these commands to reproduce and diagnose the issue:

npx next --version
grep -n "params" app/page.tsx