#Error: Route "/pos/[merchantID]" used `params.merchantID`. `params` should be awaited before using

1 messages · Page 1 of 1 (latest)

marsh shoal
#

It is server sided page.tsx

Error: Route "/pos/[merchantID]" used params.merchantID. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
[1] at CheckoutPage (file://C%3A/Users/a/Desktop/a/app/pos/%5BmerchantID%5D/page.tsx:9:28)
[1] 7 |
[1] 8 | async function CheckoutPage({ params }: { params: { merchantID: string } }) {
[1] > 9 | const merchantID = params.merchantID;
[1] | ^
[1] 10 |
[1] 11 | if (!merchantID || !isValidObjectId(merchantID)) return NotFound();

Learn more about why accessing certain APIs synchronously now warns.

fiery finchBOT
#

Hi @marsh shoal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

This error is related to a change introduced in Next.js 15 regarding how dynamic route parameters are handled. In Next.js 15, the params object is now asynchronous and needs to be awaited before accessing its properties. Let's fix your code to address this issue.

Here's how you can modify your CheckoutPage function to resolve the error:

async function CheckoutPage({ params }: { params: Promise<{ merchantID: string }> }) {
  const { merchantID } = await params;

  if (!merchantID || !isValidObjectId(merchantID)) return NotFound();

  // Rest of your code...
}

The key changes are:

  1. Update the type of params to Promise<{ merchantID: string }>.
  2. Use await to access the merchantID property from the params object.

This change is part of the breaking changes introduced in Next.js 15 for async request APIs. The params prop is now a promise that needs to be awaited before accessing its properties.

For more information on this change and how to handle it, you can refer to the following resources:

  1. Next.js 15 Upgrade Guide
  2. Dynamic APIs are Asynchronous

These documents provide detailed explanations of the changes and how to properly handle dynamic route parameters in Next.js 15.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: