如何在useParams中使用数字类型ID？React路由参数问题

1. 修复useParams的TypeScript类型错误 #

URL中的路由参数本质都是字符串，所以useParams的泛型定义里，id必须是string类型，不能直接设为number——这就是你遇到TypeScript错误的核心原因。

修正代码中的类型定义：

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

如果后端接口要求数字类型的ID，在发送请求前把id转换为数字即可：

// 转换为数字并校验有效性
const pokemonId = id ? Number(id) : null;
if (!pokemonId || isNaN(pokemonId)) return;

axios.get(`http://localhost:3001/pokemons/${pokemonId}`)

2. 排查404错误的原因 #

前端路由配置检查 #

确保React Router的路由配置正确设置了动态参数，必须用:id标识占位符：

// 正确的路由配置示例
<Routes>
  <Route path="/pokemons" element={<PokemonsList />} />
  <Route path="/pokemons/:id" element={<PokemonsDetail />} />
</Routes>

如果写成/pokemons/id这类固定路径，就会触发404。

后端接口检查 #

直接在浏览器访问http://localhost:3001/pokemons/3，如果也返回404，说明是后端接口的问题：

• 确认后端是否配置了/pokemons/:id的路由（比如Express中的app.get('/pokemons/:id', ...)）
• 检查后端是否能正确解析ID参数（兼容字符串或数字类型）

3. 解决页面无内容的问题 #

改完类型后页面无内容，大概率是以下原因：

• 无效请求未拦截：在useEffect中先判断id的有效性，避免发送无效请求：

  useEffect(() => {
    if (!id) return;
    const pokemonId = Number(id);
    if (isNaN(pokemonId)) return;
  
    axios.get(`http://localhost:3001/pokemons/${pokemonId}`)
      .then(res => setPokemon(res.data))
      .catch(err => console.error('请求失败:', err));
  }, [id]);
  

• 缺少数据渲染逻辑：检查组件是否有渲染pokemon数据的代码，比如：

  return (
    <div>
      {pokemon ? (
        <div>
          <h2>{pokemon.name}</h2>
          {/* 渲染其他属性 */}
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
  

• 请求异常未排查：打开浏览器控制台的Network面板，查看请求的状态码和响应数据，确认请求是否成功、数据是否正确返回。

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