Next.js中通过<Link>传递userId后如何正确获取该数据？

问题根源 #

你在Link的query字段里直接传入了userId（值为990），但Next.js要求query必须是键值对格式的对象。直接传值会被解析成「键为990、值为空」的异常参数，所以URL会变成products/12?990，对应的query对象里就出现了{990:""}的奇怪结构。

修正传参代码 #

把query改成标准的键值对形式，给userId指定明确的键名：

<Link href={{ 
  pathname: `/products/${id}`, 
  query: { userId } // 等价于 { userId: userId }
}}>  
  <a>Show more</a>
</Link>

修改后URL会变成符合规范的products/12?userId=990，query对象结构也会正常显示为{id:"12", userId:"990"}。

接收页面获取参数 #

在[id].tsx里直接通过键名读取userId即可：

const router = useRouter();
const { id, userId } = router.query;

console.log("产品ID:", id);
console.log("用户ID:", userId);

特殊场景的兼容写法（不推荐） #

如果非要保留原有异常参数格式（不符合URL规范，不建议这么做），可以通过遍历query对象的键来提取数值型的userId：

const router = useRouter();
const userId = Object.keys(router.query).find(key => !isNaN(Number(key)));
console.log("用户ID:", userId);

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