React Router v6+Firebase v9租户系统：卡片跳转详情页异常排查

问题1：首页点击卡片传参错误 #

首页遍历租户列表时，你调用handleTenantClicked(doc.id)，这里的doc是从Firebase导入的方法，不是当前循环的租户对象，导致传递给详情页的state是字符串ID而非完整租户数据。

修复后的卡片点击代码：

<div className="Card" onClick={()=>{handleTenantClicked(tenant)}}>

问题2：详情页state访问路径错误 #

你在详情页中尝试通过state.doc.Name获取数据，但实际传入的是完整的租户对象，不存在doc嵌套层级。同时需增加空值判断，避免跳转时state为空引发报错。

修复后的详情页代码：

import React from 'react'
import { useLocation } from 'react-router-dom';

function Doc(props) {
  const {state} = useLocation();
 
  return (
    <div>
      doc
      {state && (
        <>
          <h1>{state.Name} {state.Surname}</h1>
          <h4>{state.Address}</h4>
          <h5>{state.Contact}</h5>
        </>
      )}
    </div>
  )
}

export default Doc

问题3：冗余代码清理 #

首页中的const {id} = useParams();属于无效代码（Home组件对应根路径/，无URL参数），直接删除即可。

路由配置检查 #

确保你的路由配置已正确注册/doc路径，示例如下：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Doc from './Doc';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/doc" element={<Doc />} />
      {/* 其他路由 */}
    </Routes>
  );
}

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