I am generating static params based on a simple schema file. This is the code:

export async function generateStaticParams() {
  const slugs = dynamicPages.map((page) => ({ slug: page }));
  console.log("Slugs:", slugs);
  return slugs;
}

export default async function DynamicPage({ params }) {
  console.log("Params:", params)
  const { slug } = params;

  const dynamicPage = await fetchDynamicPage(slug);
  const generalContent = await fetchGeneralContent();

  return (
    <Layout generalContent={generalContent.static}>
      <HeadingSection content={dynamicPage.static.heading} />
      <DynamicPage sections={dynamicPage.dynamic} />
    </Layout>
  );
}

This is the output:

Params: { slug: 'test1' }
Params: undefined

 ⨯ app\[slug]\page.jsx (15:10) @ slug
 ⨯ TypeError: Cannot destructure property 'slug' of 'params' as it is undefined.
    at DynamicPage (./app/[slug]/page.jsx:29:13)
    at stringify (<anonymous>)
  13 | export default async function DynamicPage({ params }) {
  14 |   console.log(params)
> 15 |   const { slug } = params;
     |          ^
  16 |
  17 |   const dynamicPage = await fetchDynamicPage(slug);
  18 |   const generalContent = await fetchGeneralContent();

Slugs: [
  { slug: 'test1' },
  { slug: 'test2' },
  { slug: 'test3' },
]

As you can see, when first logged, params returns { slug: 'test1' } but then for some reason it's logged a second time which returns undefined. After all of that, only then is the console log inside generateStaticParams ran, which returns:

[
  { slug: 'test1' },
  { slug: 'test2' },
  { slug: 'test3' },
]

Any suggestions? I must be missing something simple.

EDIT: Condtionally rendering the page when params exists seems to fix the issue. However, this shouldn't be necessary in the first place, so I'd still like to tackle the issue's origin.