使用React Router的useParams报employeeId属性不存在类型错误求助

问题原因 #

这个报错是TypeScript的类型检查导致的：React Router v6 的useParams默认返回的是Readonly<Params<string>>类型，TS不知道你当前路由匹配的参数里包含employeeId，所以会报属性不存在的错误。另外两个潜在的诱因：

1. 你在UpdateEmployee组件中从react-router引入useParams，其余路由相关依赖从react-router-dom引入，版本不一致可能导致类型异常
2. 你封装的PrivateRoute写法不符合React Router v6的规范，路由参数的类型无法穿透自定义的Route组件传递到下游页面组件

解决步骤 #

1. 统一依赖引入来源，所有路由相关API都从react-router-dom引入：

// UpdateEmployee.component.tsx 修改引入
import { useParams } from 'react-router-dom';

2. 给useParams传入泛型声明参数类型：

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

如果你的路由参数是可选的，泛型里可以写成{ employeeId?: string }，你当前路由配置里:employeeId是必填参数，所以不需要加问号。

3. （可选但强烈建议）修正PrivateRoute的写法，React Router v6不支持在Routes下直接放自定义Route组件，正确的私有路由封装方式是作为组件包裹器：

// 修改PrivateRoutes.component.tsx
import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../hooks/reduxHooks';
import { setUser } from '../../services/reducers/Auth.reducer';

const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
  const dispatch = useAppDispatch();
  const localStorageData = localStorage.getItem('user');
  const user = localStorageData ? JSON.parse(localStorageData) : null;

  if (!user) {
    return <Navigate to="/login" />;
  }
  const stateUser = useAppSelector((state) => state.auth.user);
  if (!stateUser) {
    dispatch(setUser(user));
  }

  return children;
};

export default PrivateRoute;

对应修改路由配置：

const AllRoutes = () => (
  <Router>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<DefaultContainer />}>
        <Route path="/" element={<PrivateRoute><Home /></PrivateRoute>} />
        <Route path="/e/employees" element={<PrivateRoute><EmployeeList /></PrivateRoute>} />
        <Route path="/e/add" element={<PrivateRoute><AddEmployee /></PrivateRoute>} />
        <Route path="/e/:employeeId" element={<PrivateRoute><Employee /></PrivateRoute>} />
        <Route path="/e/update/:employeeId" element={<PrivateRoute><UpdateEmployee /></PrivateRoute>} />
       </Route>
    </Routes>
  </Router>
);

4. 如果修改后依然报错，重启TypeScript服务即可（VSCode中按Ctrl+Shift+P，选择「TypeScript: Restart TS Server」）。

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