Firestore getDocs获取数据后仅最后项更新问题修复求助

1. 状态更新时的引用复用问题 #

直接修改数组内原对象的属性会导致React无法识别单个任务的状态变化，最终只有最后一次修改被生效。

错误示例：

const updateTasks = (firestoreData) => {
  let tempTasks = [...tasks];
  firestoreData.forEach(doc => {
    const task = tempTasks.find(t => t.id === doc.id);
    if (task) {
      task.step = doc.data().step; // 直接修改原对象引用，React无法追踪变化
      task.steps = doc.data().steps;
    }
  });
  setTasks(tempTasks);
}

修复方案：
通过返回新对象的方式更新状态，确保每个修改后的任务都有独立引用：

const updateTasks = (firestoreData) => {
  setTasks(prevTasks => {
    return prevTasks.map(task => {
      const firestoreTask = firestoreData.find(doc => doc.id === task.id);
      return firestoreTask ? {
        ...task,
        step: firestoreTask.data().step,
        steps: firestoreTask.data().steps
      } : task;
    });
  });
}

2. Firestore数据匹配与遍历错误 #

如果遍历Firestore数据时匹配逻辑错误（比如错误绑定到最后一个任务），会导致只有最后一项被更新。

优化方案：
先将Firestore数据转为ID映射的Map，再批量匹配更新，避免遍历错误：

const fetchUserTasks = async () => {
  const querySnapshot = await getDocs(collection(db, 'userTasks'));
  const firestoreTaskMap = new Map();
  
  querySnapshot.forEach(doc => {
    firestoreTaskMap.set(doc.id, doc.data());
  });

  setTasks(prevTasks => prevTasks.map(task => {
    const taskData = firestoreTaskMap.get(task.id);
    return taskData ? { ...task, ...taskData } : task;
  }));
}

3. 列表渲染的Key值缺失 #

渲染任务列表时未设置唯一key，React会复用组件实例，导致状态更新不生效。

错误示例：

{tasks.map(task => (
  <TaskComponent task={task} />
))}

修复方案：
使用任务ID作为唯一Key：

{tasks.map(task => (
  <TaskComponent key={task.id} task={task} />
))}

4. 数据同步时机问题 #

确保组件挂载后再执行Firestore数据拉取，避免状态初始化覆盖：

useEffect(() => {
  const fetchData = async () => {
    await fetchUserTasks();
  };
  fetchData();
}, []); // 空依赖数组确保仅在组件挂载时执行一次

最后检查Firestore文档中step和steps字段的拼写是否与代码一致，避免因字段名不匹配导致数据无法正确读取。

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