React中useEffect内请求Firestore时第二次获取不到首次请求数据问题

问题根因 #

你遇到的第二次请求拿到的data1始终为null的问题，是两个React机制的认知误区叠加导致的：

• useState返回的状态值是当前渲染周期的固定快照，不是可实时更新的响应式引用。你在同一个空依赖useEffect的执行链路里调用setData1，只会触发组件下一轮重渲染，不会把当前闭包里持有的、初始值为null的data1变量同步更新为最新请求结果。
• 你在逻辑里绕了不必要的弯：明明已经通过await拿到了fetchFirst的真实返回值，却偏要等这个值存进state之后再取出来当第二个请求的入参，相当于人为绕开了手里已经拿到的真实数据，去拿永远是旧快照的状态值，自然只能取到初始的null。

推荐解决方案 #

方案1：直接复用异步返回值，绕开不必要的state中转（性能最优） #

整个请求链路不需要等state更新完成，拿到第一个请求的返回值直接传入第二个请求即可，是改动最小、运行最稳定的写法：

useEffect(() => {
  // 定义内部异步执行逻辑
  const fetchAllFirestoreData = async () => {
    // 直接获取第一份请求的原始返回值
    const firstData = await fetchFirst();
    // 将返回值写入state供组件渲染使用
    setData1(firstData);
    // 直接将原始返回值作为入参传给第二个请求，完全不存在null值问题
    const secondData = await fetchSecond(firstData);
    setData2(secondData);
  }
  fetchAllFirestoreData();
  // 补充组件卸载/请求取消的清理逻辑，避免内存泄漏
}, [])

这种写法的核心逻辑是：第二个请求依赖的是第一个请求的结果，不是存储这个结果的state。你完全不需要等待React完成state更新、重渲染组件的过程，就能拿到准确的入参值，链路最短也不会有时序问题。

方案2：拆分两个独立useEffect，靠状态变化触发依赖请求 #

如果你的业务逻辑需要将两个数据拉取流程拆分（比如后续要单独触发第一份数据的刷新），可以利用React的依赖触发机制实现解耦：

// 空依赖useEffect只负责拉取第一份数据，组件挂载时执行一次
useEffect(() => {
  const loadFirstData = async () => {
    const firstData = await fetchFirst();
    setData1(firstData);
  }
  loadFirstData();
}, [])

// 第二个useEffect绑定data1的状态变化，只要拿到有效非空值就自动拉取第二份数据
useEffect(() => {
  // 跳过组件首次渲染时data1为初始null的空值场景
  if (!data1) return;
  const loadSecondData = async () => {
    const secondData = await fetchSecond(data1);
    setData2(secondData);
  }
  loadSecondData();
}, [data1])

这种写法和你原有代码的结构兼容性最高，完全依赖React本身的渲染机制触发请求，也不会出现传null的问题。

常见避坑点 #

• 不要在同一个空依赖useEffect的闭包里，把调用setData1之后的data1变量当作实时值使用：这个变量从组件挂载、第一次执行该useEffect开始，就被闭包锁死为初始值null，不管中途调用多少次setData，当前这次执行链路里它永远不会发生变化。
• 不需要为了“拿到实时的data1值”额外引入useRef、延迟setTimeout等奇技淫巧，这类写法只会增加逻辑复杂度，本质上你需要的入参是第一个请求的返回结果，不是存储结果的state副本，绕开state中转就能从根源解决问题。

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