mirror of
https://github.com/vercel/commerce.git
synced 2025-06-06 08:16:59 +00:00
fbea7e6d1f
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.
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
// app/content/[slug]/page.tsx
|
|
|
|
// Simulate fetching content (replace with actual CMS fetching later)
|
|
async function getContent(slug: string) {
|
|
// In a real app, you'd fetch this from a CMS
|
|
const allContent: { [key: string]: { title: string; body: string[] } } = {
|
|
'about-us': {
|
|
title: 'About Us',
|
|
body: [
|
|
'This is the about us page.',
|
|
'We are a company that does things.'
|
|
]
|
|
},
|
|
'contact-us': {
|
|
title: 'Contact Us',
|
|
body: [
|
|
'You can contact us via email or phone.',
|
|
'Email: contact@example.com',
|
|
'Phone: 123-456-7890'
|
|
]
|
|
},
|
|
'privacy-policy': {
|
|
title: 'Privacy Policy',
|
|
body: [
|
|
'This is our privacy policy.',
|
|
'We respect your privacy and are committed to protecting your personal data.'
|
|
]
|
|
}
|
|
};
|
|
// Ensure slug is a string before using it as an index
|
|
return allContent[String(slug)] || null;
|
|
}
|
|
|
|
// Define an interface for the page's props, with params and searchParams as Promises
|
|
interface ContentPageProps {
|
|
params: Promise<{ slug: string }>;
|
|
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
|
}
|
|
|
|
export default async function ContentPage({ params, searchParams }: ContentPageProps) {
|
|
// 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 {resolvedParams.slug}</div>;
|
|
}
|
|
|
|
return (
|
|
<div style={{ padding: '20px' }}>
|
|
<h1>{content.title}</h1>
|
|
{content.body.map((paragraph, index) => (
|
|
<p key={index}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Optional: Generate static params still works the same way
|
|
// export async function generateStaticParams() {
|
|
// return [{ slug: 'about-us' }, { slug: 'contact-us' }, { slug: 'privacy-policy' }];
|
|
// }
|