为什么React Router v6的useParams返回属性可能为undefined？

这个类型定义是React Router团队出于类型安全考虑做的通用设计，确实存在实际运行时参数为undefined的场景，主要有以下几类：

• 组件未挂载在对应带参数的路由下
  如果你定义的路由规则是/post/:slug，但将调用了useParams("slug")的组件同时挂载在无该参数的路由（比如/home、/post）下，此时提取的slug自然为undefined。
• 匹配到可选参数路由
  React Router v6支持可选路由参数，写法为/post/:slug?，这类路由在没有传入slug的场景下也会命中，此时返回的slug就是undefined。
• 读取了当前路由未定义的参数
  尤其是嵌套路由场景下，父路由定义了:id参数，子路由中尝试读取不存在的slug参数时，返回值也为undefined。

TypeScript静态检查阶段无法预判组件实际运行时挂载的路由场景，也无法校验你传入useParams的泛型参数是否和当前路由实际定义的参数名完全匹配，因此给所有参数加上| undefined是最稳妥的类型安全设计，避免开发者默认参数一定存在，导致运行时报错。

如果你的业务场景能100%确定当前路由一定会携带对应参数，可以用非空断言来收窄类型：

const { slug } = useParams<"slug">();
const currentSlug = slug!; // 确定有值时使用非空断言

更稳妥的做法是做运行时校验，遇到undefined直接跳转404页面，避免非法路由访问。

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