如何将useParams获取的路由参数ID转换为纯数字并用于API请求

你遇到的情况很常见——路由参数默认都是字符串类型，而你需要把它转成纯数字才能匹配接口的参数要求。这里有两种简洁的修改方式，任选其一即可：

方式一：先解构转存，再使用 #

1. 替换你原来的参数获取代码，先从useParams()返回的对象里解构出id字符串，再转换为数字：

// 替换原代码 let empId=useParams()
const { id } = useParams();
// 把字符串id转成数字，两种方法都可行：
const empId = Number(id); 
// 或者用parseInt，记得传入第二个参数10指定十进制
// const empId = parseInt(id, 10);

2. 然后在Axios请求里直接使用转换后的empId：

axios
  .get(`http://localhost:8000/EmployeeData/${empId}`)
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

方式二：直接在请求中转换 #

如果不想额外声明变量，也可以直接在模板字符串里完成类型转换，代码更紧凑：

const { id } = useParams();
axios
  .get(`http://localhost:8000/EmployeeData/${Number(id)}`)
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

小提示 #

路由参数本质是字符串（因为URL本身就是字符串格式），所以必须做类型转换，避免后端接口因参数类型不匹配返回错误。如果担心id可能是无效值，还可以加个简单校验：

const { id } = useParams();
const empId = Number(id);
if (isNaN(empId)) {
  // 处理无效ID的情况，比如跳转到错误页面或提示用户
  console.error("无效的员工ID");
}

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