await params in v15

Unanswered

Giant panda posted this in #help-forum

Giant pandaOP

2024-10-30T06:06:45.784Z

I'm trying to access the params.slug array from a Server Component. The documentation says that those now are asynchronous and I should await for them to use them. BUT I'm always getting undefined.
I have a dynamic catch-all route [[...slug]]/page.tsx. Inside is my async function

export default async function Home({params}: {params: {slug: string[]}}) {

    const {slug} = await params;
    console.log(slug, "<<<"); // <<<<< THIS LINE IS ALWAYS RETUNGING UNDEFINED
    const {data} = await fetchApolloData(getPathData, {
      thepath:

/${slug?.join('/') || ''}

});
    const initialData = data?.getPathData;
...

Does anyone have an idea of what's wrong with this simple code?

5 Replies

joulev

2024-10-30T06:11:54.375Z

Are you on /? if so, it is undefined, as expected. If you are on /hello it will be [“hello”], if you are on /hello/world it will be [“hello”, “world”].

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments

also your typing is wrong, but that’s not the bug here.

Giant pandaOP

2024-10-30T06:34:42.293Z

hmmm but even If I'm in / when I console log await params will it be undefined? is that the expected behavior?
In v14 when in / and console log params it will log an empty object {}

Asian black bear

2024-10-30T06:38:11.444Z

That's the same behavior, something like slug being undefined means the entire params object is just empty.

The link joulev posted clearly explains what the expected values are in certain cases.

joulev

2024-10-30T06:43:45.676Z

it is an empty object for me