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

View File

@ -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 { interface ContentPageProps {
params: { params: Promise<{ slug: string }>;
slug: string; searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};
searchParams: { [key: string]: string | string[] | undefined };
} }
export default async function ContentPage({ params, searchParams }: ContentPageProps) { export default async function ContentPage({ params, searchParams }: ContentPageProps) {
// searchParams is now destructured but not necessarily used if the page doesn't need it. // Await the params promise to get its value
// This is to satisfy the PageProps constraint. const resolvedParams = await params;
const content = await getContent(params.slug); // Await searchParams if you need to use them, e.g.:
// const resolvedSearchParams = await searchParams;
const content = await getContent(resolvedParams.slug);
if (!content) { if (!content) {
return <div>Content not found for {params.slug}</div>; return <div>Content not found for {resolvedParams.slug}</div>;
} }
return ( 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() { // export async function generateStaticParams() {
// return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }]; // return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }];
// } // }