From fbea7e6d1f57baef5dc16b625ce477c071b8ca08 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 22 May 2025 12:12:44 +0000
Subject: [PATCH] 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.
---
 app/content/[slug]/page.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

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 <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' }];
 // }