如何在React不同组件中复用Firestore动态文档ID

如果你用Context传递ID没成功，大概率是Context的使用步骤有误，以下是标准的实现流程，结合你的场景给出具体代码：

1. 独立创建Context实例 #

首先在单独的文件中创建Context，避免在组件内部创建导致每次渲染生成新实例：

// ReportIdContext.js
import { createContext, useContext } from 'react';

// 初始化Context值为null
const ReportIdContext = createContext(null);

// 封装自定义Hook，简化子组件调用
export const useReportId = () => useContext(ReportIdContext);

export default ReportIdContext;

2. 在父组件中用Provider包裹子组件 #

找到EditReportMcs和ViewReportMcs的共同父组件，用Context的Provider包裹这两个组件，并通过value传递ID和更新ID的方法：

// 比如共同父组件Dashboard.js
import { useState } from 'react';
import ReportIdContext from './ReportIdContext';
import EditReportMcs from './EditReportMcs';
import ViewReportMcs from './ViewReportMcs';

function Dashboard() {
  // 用状态管理当前选中的文档ID
  const [currentReportId, setCurrentReportId] = useState(null);

  return (
    <ReportIdContext.Provider value={{ currentReportId, setCurrentReportId }}>
      <EditReportMcs />
      <ViewReportMcs />
    </ReportIdContext.Provider>
  );
}

export default Dashboard;

3. 在EditReportMcs中更新文档ID #

在Edit组件中通过自定义Hook拿到更新方法，获取到Firestore文档ID后更新状态：

// EditReportMcs.js
import { useReportId } from './ReportIdContext';

function EditReportMcs() {
  const { setCurrentReportId } = useReportId();

  // 模拟从Firestore获取文档ID的逻辑
  const handleGetDocumentId = async () => {
    // 替换成你的实际Firestore查询代码
    const snapshot = await firestore.collection('reports').doc('xxx').get();
    if (snapshot.exists) {
      setCurrentReportId(snapshot.id);
    }
  };

  return (
    <div>
      <button onClick={handleGetDocumentId}>选择要编辑的报告</button>
      {/* 你的编辑表单逻辑 */}
    </div>
  );
}

export default EditReportMcs;

4. 在ViewReportMcs中复用文档ID #

在View组件中通过自定义Hook拿到最新的文档ID，用于查询和展示：

// ViewReportMcs.js
import { useReportId } from './ReportIdContext';

function ViewReportMcs() {
  const { currentReportId } = useReportId();

  // 没有ID时提示用户选择
  if (!currentReportId) {
    return <p>请先选择要查看的报告</p>;
  }

  // 用currentReportId去Firestore拉取报告详情
  return (
    <div>
      <h2>报告ID：{currentReportId}</h2>
      {/* 报告详情展示逻辑 */}
    </div>
  );
}

export default ViewReportMcs;

常见问题排查 #

• Context实例重复创建：不要在组件内部定义Context，必须放在单独文件或组件外部，否则每次组件渲染都会生成新的Context，导致状态无法共享。
• Provider范围不足：确保Provider包裹了所有需要访问该ID的组件，包括Edit和View组件，否则子组件无法获取到Context值。
• 状态未触发更新：必须通过useState（或useReducer）管理文档ID，直接修改value不会触发组件重新渲染，子组件拿不到最新值。

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