TTC
Theo's Typesafe Cult•4d ago
sukhesh

How to await params?

Hello, scoured stackoverflow and enlisted the help of some LLMs but couldn't figure this out (maybe i need sleep). I get the error: Error: Route "/[baseId]" used params.baseId. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at ProjectPage (src/app/[baseId]/page.tsx:14:24) 12 | export default async function ProjectPage(promise: Promise<{ params: { baseId: string } }>) { 13 | const { params } = await promise;
14 | const baseId = params.baseId;
| ^ 15 | 16 | if (!baseId) return notFound(); 17 | For this method in my modal page.tsx /[baseId]: 
export default async function ProjectPage({ params }: { params: { baseId: string } }) {
  ...
  const base = await caller.base.getFullBase({ id: params.baseId });
  if (!base) return notFound();
  ...
  return (
    ...
  );
}
export default async function ProjectPage({ params }: { params: { baseId: string } }) {
  ...
  const base = await caller.base.getFullBase({ id: params.baseId });
  if (!base) return notFound();
  ...
  return (
    ...
  );
}
(My code works but I would like to not get an error)
Dynamic APIs are Asynchronous
Learn more about why accessing certain APIs synchronously now warns.
3 Replies
GYSIS
GYSIS•4d ago
Sleep helps.... think you're looking for this: export default async function ProjectPage({params}: { params: Promise<{ baseId: string }> }) { const {baseId} = await params;
antho1404
antho1404•2d ago
I noticed that a lot of models still push on this function signature and not the one with Promise, which is a recent change in next 15 if I remember correctly. Any params or headers now need to be a promise
Jakov
Jakov•2d ago
Run this in your terminal: 
npx @next/codemod@canary upgrade latest
npx @next/codemod@canary upgrade latest

Did you find this page helpful?