React+TypeScript使用useParams取id报TS2339错误如何修复？

这个TS报错的原因是useParams的默认返回类型是空对象{}，TypeScript不知道你当前路由下返回的参数里有id字段，需要你通过泛型手动声明参数类型，修复方法如下：

1. 直接给useParams传入泛型 #

修改获取id的代码，内联声明参数类型即可：

let { id } = useParams<{ id: string }>();

路由参数默认都是字符串类型，如果你的接口需要传入数字类型的id，可以在调用接口时做类型转换：

const getSingleTicket = async () => {
  getTicket(Number(id))
    .then((resp) => {
      setTicket(resp.data);
    })
}

2. （可选）复用参数类型 #

如果这个路由参数的结构需要在多处使用，可以单独定义类型别名：

// 可放在公共类型文件或者当前组件顶部
type TicketRouteParams = {
  id: string
}

// 组件内使用
let { id } = useParams<TicketRouteParams>();

3. 额外优化建议 #

给useEffect添加id作为依赖项，避免路由id变化时不会重新请求最新数据，同时增加空值判断避免异常：

useEffect(() => {
  // id不存在时不发起请求
  if (!id) return
  getSingleTicket();    
}, [id]);

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