1
0
mirror of https://github.com/vercel/commerce.git synced 2025-06-10 01:46:59 +00:00

Fix: Align PageProps with Next.js 15 Promise-based params

This commit resolves the persistent TypeScript build error:
"Type '...' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ slug: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]"
which occurred in `app/content/[slug]/page.tsx`.

The Next.js 15 documentation states that `params` and `searchParams`
props for Page components are now Promises. The `ContentPageProps`
interface and the `ContentPage` component have been updated accordingly:
- `params` is now typed as `Promise<{ slug: string }>`.
- `searchParams` is now typed as `Promise<{ [key: string]: string | string[] | undefined }>`.
- The `params` object is now `await`ed within the async component
  to retrieve its value before being used.

This change ensures the component's props definition correctly aligns
with the requirements for async server components with dynamic routes
in Next.js 15.
This commit is contained in:
google-labs-jules[bot] 2025-05-22 12:12:44 +00:00
parent e20efe40ba
commit fbea7e6d1f

@ -27,24 +27,26 @@ async function getContent(slug: string) {
]
}
};
return allContent[slug] || null;
// Ensure slug is a string before using it as an index
return allContent[String(slug)] || null;
}
// Define an interface for the page's props, including searchParams
// Define an interface for the page's props, with params and searchParams as Promises
interface ContentPageProps {
params: {
slug: string;
};
searchParams: { [key: string]: string | string[] | undefined };
params: Promise<{ slug: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
export default async function ContentPage({ params, searchParams }: ContentPageProps) {
// searchParams is now destructured but not necessarily used if the page doesn't need it.
// This is to satisfy the PageProps constraint.
const content = await getContent(params.slug);
// Await the params promise to get its value
const resolvedParams = await params;
// Await searchParams if you need to use them, e.g.:
// const resolvedSearchParams = await searchParams;
const content = await getContent(resolvedParams.slug);
if (!content) {
return <div>Content not found for {params.slug}</div>;
return <div>Content not found for {resolvedParams.slug}</div>;
}
return (
@ -57,7 +59,7 @@ export default async function ContentPage({ params, searchParams }: ContentPageP
);
}
// Optional: Generate static paths if you have a known set of content pages
// Optional: Generate static params still works the same way
// export async function generateStaticParams() {
// return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }];
// }