useParams获取的heroId转number时出现TypeScript类型错误

错误原因 #

useParams返回的参数类型是string | undefined（路由可能未匹配到该参数），导致两个问题：

1. parseInt不接受undefined作为入参，触发类型校验错误
2. 自定义Hook useHero要求参数为string类型，未处理的undefined或转换后的number类型与它不兼容

可行解决方案 #

方案1：参数校验后再处理（推荐） #

先判断heroId是否存在，不存在时做兜底提示，再执行类型转换：

import useHero from '../../hooks/useHero';
import { useParams } from 'react-router-dom'

function Herospages() {
    // 用泛型明确参数类型，避免TS自动推断为string|undefined
    const { heroId } = useParams<{ heroId: string }>();

    // 处理参数缺失的情况
    if (!heroId) {
        return <div>英雄ID缺失，请检查路由配置</div>;
    }

    // 转换为number，指定基数10避免八进制解析问题
    const value = parseInt(heroId, 10);

    // 处理非数字格式的ID
    if (isNaN(value)) {
        return <div>无效的英雄ID格式</div>;
    }

    const { data, isLoading } = useHero(value);
    // ... 后续渲染逻辑
}

方案2：非空断言（仅路由确保参数必传时用） #

如果你能保证路由配置中heroId是必填参数，可使用非空断言!告诉TS该参数不会为undefined：

import useHero from '../../hooks/useHero';
import { useParams } from 'react-router-dom'

function Herospages() {
    const { heroId } = useParams<{ heroId: string }>();
    // 非空断言，仅在路由确保heroId存在时使用
    const value = parseInt(heroId!, 10);
    const { data, isLoading } = useHero(value);
    // ... 后续渲染逻辑
}

方案3：空值合并快速兜底 #

用空值合并运算符??给heroId设置默认值，避免undefined传入parseInt：

import useHero from '../../hooks/useHero';
import { useParams } from 'react-router-dom'

function Herospages() {
    const { heroId } = useParams<{ heroId: string }>();
    // 给默认值'0'，转换后为0，可根据业务调整默认值
    const value = parseInt(heroId ?? '0', 10);
    const { data, isLoading } = useHero(value);
    // ... 后续渲染逻辑
}

额外注意事项 #

• 调用parseInt时必须加第二个参数10，防止字符串以0开头时被错误解析为八进制数
• 如果useHero实际期望接收number类型参数，需要同步更新它的类型定义，确保参数类型匹配

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