trouble understanding Params object type in nextJS13

Question

I'm having difficulty understanding the Params type structure of nextJS.

the below code runs fine:

type Params={
    params:{userid:string}
}


export default async function UserPage({params:{userid}}:Params) {

    const userData:Promise<User>= getUser(userid);
    const userPostsData:Promise<Post[]>= getUserPosts(userid);

    // const [user,userPosts]=await Promise.all([userData,userPostsData]);

    const user=await userData;

  return (
    <>
        <h2>{user.name}</h2>
        <br />
        <Suspense fallback={`<h2>Loading</h2>`}>
            <UserPosts promise={userPostsData} />
        </Suspense>
    </>
  )
}

however I don't understand the use and why Params is structured like that.

when I change Params to this:

type Params={
    userid:string
}

and I change the parameter description to this:

export default async function UserPage({userid}:Params)

it gives an error.

So I know I did something wrong but I don't know what.

(btw i'm following this tutotrial: https://youtu.be/843nec-IvW0?feature=shared )

Answer 1

params and searchParams are optional props in page component. You can check the doc. https://nextjs.org/docs/app/api-reference/file-conventions/page#props