diff --git a/app/content/[slug]/page.tsx b/app/content/[slug]/page.tsx index 993bd15ef..638d1a451 100644 --- a/app/content/[slug]/page.tsx +++ b/app/content/[slug]/page.tsx @@ -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
Content not found for {params.slug}
; + return
Content not found for {resolvedParams.slug}
; } 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' }]; // } diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index 1c384a211..e42eb34a7 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -3,63 +3,31 @@ // Simulate fetching product data async function getProduct(handle: string) { const allProducts: { [key: string]: any } = { // Use 'any' for simplicity in this mock - 'sample-product-1': { - id: 'prod-1', - name: 'Awesome T-Shirt', - description: 'This is the best t-shirt ever. Made from 100% organic cotton.', - price: { amount: '29.99', currencyCode: 'USD' }, - images: [ - { src: '/placeholder-tshirt-blue.jpg', alt: 'Awesome T-Shirt - Blue' }, - { src: '/placeholder-tshirt-red.jpg', alt: 'Awesome T-Shirt - Red' } - ], - variants: [ - { id: 'v1-color', name: 'Color', value: 'Blue' }, - { id: 'v1-size', name: 'Size', value: 'L' }, - { id: 'v1-material', name: 'Material', value: 'Cotton' } - ] - }, - 'sample-product-2': { - id: 'prod-2', - name: 'Cool Gadget Pro', - description: 'The latest and greatest gadget with amazing features.', - price: { amount: '199.50', currencyCode: 'USD' }, - images: [ - { src: '/placeholder-gadget-main.jpg', alt: 'Cool Gadget Pro' }, - { src: '/placeholder-gadget-angle.jpg', alt: 'Cool Gadget Pro - Angle View' } - ], - variants: [ - { id: 'v2-color', name: 'Color', value: 'Black' }, - { id: 'v2-storage', name: 'Storage', value: '256GB' } - ] - }, - 'another-item': { - id: 'prod-3', - name: 'Simple Mug', - description: 'A simple mug for your daily coffee or tea.', - price: { amount: '12.00', currencyCode: 'USD' }, - images: [ - { src: '/placeholder-mug.jpg', alt: 'Simple Mug' } - ], - variants: [ - { id: 'v3-color', name: 'Color', value: 'White' }, - { id: 'v3-size', name: 'Size', value: 'Standard' } - ] - } + 'sample-product-1': { id: 'prod-1', name: 'Awesome T-Shirt', description: 'This is the best t-shirt ever. Made from 100% organic cotton.', price: { amount: '29.99', currencyCode: 'USD' }, images: [ { src: '/placeholder-tshirt-blue.jpg', alt: 'Awesome T-Shirt - Blue' }, { src: '/placeholder-tshirt-red.jpg', alt: 'Awesome T-Shirt - Red' } ], variants: [ { id: 'v1-color', name: 'Color', value: 'Blue' }, { id: 'v1-size', name: 'Size', value: 'L' }, { id: 'v1-material', name: 'Material', value: 'Cotton' } ] }, + 'sample-product-2': { id: 'prod-2', name: 'Cool Gadget Pro', description: 'The latest and greatest gadget with amazing features.', price: { amount: '199.50', currencyCode: 'USD' }, images: [ { src: '/placeholder-gadget-main.jpg', alt: 'Cool Gadget Pro' }, { src: '/placeholder-gadget-angle.jpg', alt: 'Cool Gadget Pro - Angle View' } ], variants: [ { id: 'v2-color', name: 'Color', value: 'Black' }, { id: 'v2-storage', name: 'Storage', value: '256GB' } ] }, + 'another-item': { id: 'prod-3', name: 'Simple Mug', description: 'A simple mug for your daily coffee or tea.', price: { amount: '12.00', currencyCode: 'USD' }, images: [ { src: '/placeholder-mug.jpg', alt: 'Simple Mug' } ], variants: [ { id: 'v3-color', name: 'Color', value: 'White' }, { id: 'v3-size', name: 'Size', value: 'Standard' } ] } }; - // Simulate network delay - await new Promise(resolve => setTimeout(resolve, 50)); - return allProducts[handle] || null; + await new Promise(resolve => setTimeout(resolve, 50)); // Simulate network delay + return allProducts[String(handle)] || null; // Ensure handle is string } -export default async function ProductPage({ params }: { params: { handle: string } }) { - const product = await getProduct(params.handle); +interface ProductPageProps { + params: Promise<{ handle: string }>; + searchParams: Promise<{ [key: string]: string | string[] | undefined }>; +} + +export default async function ProductPage({ params, searchParams }: ProductPageProps) { + const resolvedParams = await params; + // const resolvedSearchParams = await searchParams; // If needed + + const product = await getProduct(resolvedParams.handle); if (!product) { - // In a real app, you might use Next.js's notFound() function here - return
Product not found for handle: {params.handle}
; + return
Product not found for handle: {resolvedParams.handle}
; } return ( + // ... (rest of the JSX should be the same, just ensure 'params.handle' is replaced with 'resolvedParams.handle' if it was used in the notFound message)

{product.name}

@@ -90,7 +58,6 @@ export default async function ProductPage({ params }: { params: { handle: string

No variants available for this product.

)} - {/* Add to cart button can be a simple placeholder */}