React Router v6路由参数匹配返回undefined问题求助

我在完成Full Stack Open第7部分练习时遇到问题：通过react-router-dom的useMatch()或useParams()获取URL中的id参数，该参数与用户数组中某元素的id外观完全一致，但使用array.find()却无法找到匹配项，返回undefined。

相关代码 #

用户列表组件 #

{[...users].map(u =>
    <tr key={u.id}>
        <td><Link to={`/users/${u.id}`}>{u.id}</Link></td>
        <td>{u.blogs.length}</td>
    </tr>
)}

App.jsx（已在main.jsx中用BrowserRouter包裹） #

import { Routes, Route, Link, useParams } from 'react-router-dom'

const App = () => {
    useEffect(() => {
        userService.getAll()
          .then(users => {
            setUserList(users)
            console.log('UserList:', users) // 验证userList的结构和内容
          })
          .catch(error => console.error('Error fetching users:', error))
      }, [])
    // 使用useMatch()的代码 //////
const userMatch = useMatch('/users/:id')
  console.log('userMatch id: ', String(userMatch.params.id))
  console.log('userList id: ', String(userList[0].id))


  const u = userMatch && userList > 0
    ? userList.find(u => String(u.id) === String(userMatch.params.id))
    : null
  console.log('User found:', u) // 打印找到的用户


// 使用useParams()的代码 ////////////
    let { id } = useParams() // 直接获取id参数
      console.log('Params ID:', id) // 打印id参数
      console.log('UserList:', userList) // 打印userList内容
    
      const u = userList.length > 0
        ? userList.find((u) => {
          console.log('Checking user:', u.id, 'with ID:', id) // 打印对比过程
          return Number(u.id) === Number(id)
        })
        : null
    
      console.log('User found:', u) // 打印找到的用户

return (
<div>
  <div>
    <Link to='/'>Home</Link>
    <Link to='/users'>Users</Link>
  </div>

  <div>
    <h2>blogs</h2>
    <Notification notification={notification} />
    <div>
      {users.name} logged in
      <button onClick={handleLogout}>
        logout
      </button>
    </div>
    <Routes>
      <Route path='/users/:id' element={<User user={u} />} />
      <Route path='/users' element={<Users users={userList} />} />
      <Route path='/' element={<Home />} />
    </Routes>

  </div>
</div>
)
}

调试信息 #

已完成的验证测试 #

• 确认根文件中BrowserRouter已正确包裹App组件
• 检查URL符合/users/:id的路由规则
• 单独测试useParams()能正确提取id参数
• 创建最小化版本App组件测试路由，问题仍存在
• 确认userList已通过API请求正确填充数据
• 尝试将id转换为字符串/数字类型后匹配，无效

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