React中useState无法更新从Firestore获取的数据问题排查

我遇到了React组件状态无法更新从Firestore获取的数据的问题，尝试了多种数据获取与状态更新方法均无效。已确认从Firestore获取的数据是正确的（控制台能输出正确结果），但调用setTimeLine(data)后，timeline状态仍为空数组[]。

以下是我的GameStats组件及fetchData函数代码：

GameStats组件代码 #

import "../../style/game.css";
import { useEffect, useState } from "react";
import fetchData from "@/service/client";

export const GameStats = ({ elapsedTime }) => {
  const [timeline, setTimeLine] = useState([]);

  useEffect(() => {
    fetchData().then((data) => setTimeLine(data));
  }, []);

  // ...rest of the component code
};

fetchData函数代码 #

import { collection, query, getDocs } from "firebase/firestore";
import { database } from "./FirebaseService";

export default async function fetchData() {
  const q = query(collection(database, "games"));

  const querySnapshot = await getDocs(q);
  const results = [];
  querySnapshot.forEach((doc) => {
    console.log(doc.id, " => ", doc.data());

    let id = doc.id;
    const data = doc.data();

    results.push({
      id,
      ...data,
    });
  });

  return results;
}

在fetchData函数中我创建了results数组，将每个Firestore文档的对象（包含文档ID和数据）推入数组，遍历完成后返回该数组。请问问题出在哪里？如何修复才能让timeline状态正确更新为获取到的数据？

可能的原因与修复方案 #

• 捕获异步请求的错误：虽然Firestore日志能输出数据，但如果fetchData后续处理抛出未捕获的错误，会导致then回调不执行。给请求添加错误捕获：

  useEffect(() => {
    fetchData()
      .then((data) => {
        console.log("待更新的状态数据：", data);
        setTimeLine(data);
      })
      .catch((error) => {
        console.error("数据获取失败：", error);
      });
  }, []);
  

  查看控制台是否有错误信息，定位异步流程的问题。

• 验证状态是否真的未更新：在组件内部添加日志，确认状态变化：

  export const GameStats = ({ elapsedTime }) => {
    const [timeline, setTimeLine] = useState([]);
  
    console.log("当前timeline状态：", timeline);
  
    useEffect(() => {
      fetchData()
        .then((data) => setTimeLine(data))
        .catch(err => console.error(err));
    }, []);
  
    // ...rest of the component code
  };
  

  如果控制台能看到timeline从[]变为目标数组，说明状态更新正常，问题出在后续使用timeline的逻辑中；如果始终为空，继续排查其他原因。

• 检查React严格模式影响：若项目启用了React.StrictMode，useEffect会执行两次，可能因异步请求时序导致临时状态为空。可暂时移除严格模式测试，或确保fetchData返回结果稳定。

• 确认组件未被意外卸载：如果GameStats是条件渲染的，可能在数据返回前组件已被卸载，导致状态更新失效。检查父组件的渲染逻辑，确保组件在请求期间始终挂载。

• 转换Firestore特殊数据类型：若Firestore返回的数据包含Timestamp等不可序列化类型，可转为纯JSON格式测试：

  export default async function fetchData() {
    const q = query(collection(database, "games"));
    const querySnapshot = await getDocs(q);
    
    return querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...JSON.parse(JSON.stringify(doc.data()))
    }));
  }
  

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