如何正确从router.query提取字符串并完成文章ID匹配对比

问题根因 #

你在对比值时额外添加了不必要的对象包裹语法：{ articleDetails }.toString() 会先创建一个键为articleDetails、值为路由参数的新对象，对象执行toString()方法后的结果是固定的[object Object]，自然和文章ID的字符串无法匹配。你直接写固定值"1"时没有这层对象包裹，所以可以正常匹配。

正确写法 #

直接使用提取出来的articleDetails变量做转换即可，不需要额外加花括号。同时建议先判断路由加载完成，避免Next.js首次hydration时query为空导致报错：

const router = useRouter();
// 路由未加载完成时可返回加载状态
if (!router.isReady) return <div>加载中...</div>

const { articleDetails } = router.query;
const articleData = data.project.find(
  (post) => post.id.toString() === articleDetails.toString()
);

额外优化建议 #

如果路由参数articleDetails本身可能是数组（动态路由配置为多段匹配的场景），可以再加一层取值判断，确保拿到的是字符串格式的ID：

const articleId = Array.isArray(articleDetails) ? articleDetails[0] : articleDetails
const articleData = data.project.find(
  (post) => post.id.toString() === articleId.toString()
);

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