React Router v6中如何指定useParams的返回值类型？

多参数类型定义 #

React Router v6 的 useParams 原生支持传入对象类型泛型定义多个参数，写法和 v5 基本一致，不存在仅支持单个参数的限制：

const { param1, param2 } = useParams<{ param1: string; param2: string }>();

默认状态下，上述写法返回的param1、param2类型为 string | undefined，这是 React Router v6 的默认设计：框架无法保证当前路由一定匹配到对应参数，所以默认加上了undefined类型。

去除undefined类型的方案 #

如果你能100%确保当前组件一定是在匹配了对应参数的路由下渲染，可以通过以下两种方式实现和v5一致的string类型效果：

方案1：直接使用类型断言 #

用Required工具类型包裹你的参数类型，断言返回值为必选：

const { param1, param2 } = useParams<{ param1: string; param2: string }>() as Required<{
  param1: string;
  param2: string;
}>;
// 此时 param1、param2 类型均为 string

方案2：封装自定义Hook #

如果项目中多处需要用到该能力，可以封装自定义Hook复用逻辑：

import { useParams as useReactRouterParams } from 'react-router-dom';

const useParams = <T extends Record<string, string>>() => {
  return useReactRouterParams<T>() as Required<T>;
};

// 使用时和v5用法完全一致
const { param1, param2 } = useParams<{ param1: string; param2: string }>();

注意：类型断言仅修改TypeScript静态类型判断，不会影响运行时结果，你需要自行确保路由配置中确实存在对应参数，否则运行时依然可能拿到undefined值。

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