React/Rails访问员工详情路由时出现Uncaught TypeError: 无法读取'id'

需求：直接访问路由http://localhost:4000/hris/employees/1时，展示对应员工的卡片组件。
当前问题：直接访问该路由时，Employee组件抛出错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'id')

但在Employees组件中通过map渲染Employee组件时，数据展示正常，console.log(employee.id)能正确输出，Postman测试路由无问题。

路由配置（App.js）：

<Route exact path="/hris/employees">
  <Employees 
    employees={employees}
    setEmployees={setEmployees}
    addresses={addresses}
    setAddresses={setAddresses}
    zips={zips}
    setZips={setZips}
    skills={skills}
    setSkills={setSkills}
    onSubmitNewEmployee={onSubmitNewEmployee}
    onSubmitNewSkill={onSubmitNewSkill}
    onSubmitNewAddress={onSubmitNewAddress}
    displayCard={displayCard}
    setDisplayCard={setDisplayCard}
  />
</Route>

<Route exact path="/hris/employees/:id">
  <Employee />
</Route>

• 核心问题定位：直接访问详情路由时，Employee组件没有拿到对应的员工数据。在Employees组件的map逻辑里，你是把单个employee对象作为props传给子组件的，但直接访问/hris/employees/:id时，<Employee />没有接收任何员工数据，组件内部自然无法读取employee.id。

• 步骤1：获取路由参数
  在Employee组件中，使用React Router的useParams()钩子获取URL中的id参数：

  import { useParams } from 'react-router-dom';
  
  function Employee() {
    const { id } = useParams();
    // 后续用id匹配员工数据
  }
  

• 步骤2：获取对应员工数据
  有两种方式获取数据：

  1. 从全局数据源匹配：如果employees数组在App组件中维护，可以把它作为props传给Employee组件，再用id筛选：

     // App.js中修改路由
     <Route exact path="/hris/employees/:id">
       <Employee employees={employees} />
     </Route>
     
     // Employee组件中处理
     function Employee({ employees }) {
       const { id } = useParams();
       // 注意id是字符串，要转成数字匹配
       const targetEmployee = employees.find(emp => emp.id === Number(id));
     }
     

  2. 调用接口获取：如果后端支持单个员工查询接口，直接用id发起请求获取数据：

     function Employee() {
       const { id } = useParams();
       const [employee, setEmployee] = useState(null);
       const [loading, setLoading] = useState(true);
     
       useEffect(() => {
         fetch(`/api/employees/${id}`)
           .then(res => res.json())
           .then(data => {
             setEmployee(data);
             setLoading(false);
           })
           .catch(err => console.error(err));
       }, [id]);
     }
     

• 步骤3：处理数据未加载的情况
  在渲染前加判断，避免undefined报错：

  function Employee({ employees }) {
    const { id } = useParams();
    const targetEmployee = employees.find(emp => emp.id === Number(id));
  
    if (!targetEmployee) {
      return <div>员工不存在或数据加载中...</div>;
    }
  
    return (
      // 渲染员工卡片内容，比如 <div>{targetEmployee.id}</div>
    );
  }
  

• 可选优化：用React Context管理全局的员工数据，避免逐层传props，详情组件直接从Context中获取employees数组。

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