Next.js中useRouter获取路由参数时访问y[1]偶发TypeError报错

逐行拆解代码排查后，最终定位报错触发点是y[1]的索引读取操作，控制台抛出错误：

TypeError: Cannot read properties of undefined (reading '1')

为了定位问题特意把逻辑拆成逐行写法（日常开发不会用这种冗余写法），该问题是偶发：代码正常运行时console.log(y)会输出长度为2的数组，索引0对应值为"chatid"，索引1对应值为"id"。
问题相关代码如下：

const router = useRouter()
const chatidx = (Object.entries(router.query));
const y = (chatidx[0]);
console.log(y)
console.log(y[1]);

• 路由实例在初始化阶段、路由参数还没完成注入时，router.query的初始值是空对象{}
• 对空对象执行Object.entries()会返回空数组[]，这时候取chatidx[0]拿到的就是undefined，再读取undefined[1]就会触发上述类型错误
• 偶发的原因很简单：代码执行时机如果卡在参数加载完成前，就会报错；如果参数已经注入完成，router.query有实际键值对，代码就能正常运行。

• 不要依赖Object.entries()返回数组的固定顺序取第一个元素，直接通过明确的键名读取query参数是最稳妥的写法
• 取值前加空值判断/可选链，避免在路由参数未就绪时读取undefined的属性

修复参考代码：

const router = useRouter()
// 优先直接指定键名读参数，从根源避免顺序依赖问题
const chatid = router.query.chatid
const id = router.query.id

// 如果确实需要用entries遍历写法，加兜底判断
const chatidx = Object.entries(router.query ?? {});
const y = chatidx?.[0];
console.log(y)
// 确认y是长度足够的数组再读索引
if (Array.isArray(y) && y.length >= 2) {
  console.log(y[1]);
}

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