React TS项目使用useParams获取URL参数报TS2339错误如何解决

1. 为useParams指定泛型类型解决类型报错 #

该报错的原因是TypeScript默认无法识别useParams返回对象中存在ids属性，你需要主动为其传入路由参数类型定义：

// 定义当前页面的路由参数类型
type TicketProfileParams = {
  ids: string;
};

export default function TicketProfile(props: any) {
    // 给useParams传入泛型指定返回值类型
    let { ids } = useParams<TicketProfileParams>();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    // 后续代码保持不变

2. 修复路由跳转的参数拼接错误 #

你当前的跳转代码会导致取到的ids值携带多余前缀：

// 原写法拿到的ids值为 "ids=xxx"，不符合预期
history.push(`/ticket-profile/ids=${id}`)

调整为如下写法即可拿到纯id值：

history.push(`/ticket-profile/${id}`)

3. 补全useEffect依赖项 #

你当前useEffect的依赖数组为空，若页面参数ids发生变更时不会重新触发数据请求，建议调整为：

useEffect(() => {
    // 增加非空判断避免无效请求
    if (ids) getSingleTicket();    
}, [ids]);

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