Next.js 13中Params对象类型结构理解困惑求助

这是因为Next.js对动态路由页面组件的props传递有固定结构：

• 当你创建动态路由（比如app/users/[userid]/page.tsx）时，Next.js会给页面组件传递一个顶层对象，这个对象里的params属性才是存储动态路由参数的地方。
• 换句话说，组件实际收到的props结构是：{ params: { userid: string } }，而不是直接把userid放在顶层。

错误原因拆解 #

你修改后的Params类型{userid:string}，相当于告诉TypeScript：组件接收的props里直接有一个userid字段。但实际Next.js传过来的props里根本没有顶层的userid，只有params，所以TypeScript会报错找不到这个属性。

正确结构对应示例 #

你的第一段代码里用解构赋值{params:{userid}}，其实是从顶层props的params属性里取出userid，这完全符合Next.js的props传递规则，所以能正常运行：

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

// 从props的params属性中解构出userid
export default async function UserPage({params:{userid}}:Params) {
  // ...
}

另一种等价写法 #

如果你不想嵌套解构，也可以这样写，逻辑完全一致：

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

export default async function UserPage(props:Params) {
  const userid = props.params.userid;
  // ...
}

内容的提问来源于stack exchange，提问作者user22793041