Firestore v9中addDoc执行早于State更新，添加文档为空值问题

问题原因 #

React的useState更新是异步批量处理的，调用setWorkout后，workout变量不会立刻更新为新值。所以你在setWorkout之后直接console.log(workout)和调用addDoc时，拿到的还是更新前的空状态，导致添加的文档为空。

解决方案 #

方案1：直接使用现有变量构造文档（推荐） #

既然你已经有workoutName和currentExercises这两个变量，完全可以直接用它们来创建Firestore文档，不需要依赖state的更新：

const SaveWorkout = async () => {
  // 直接用当前变量构造新的 workout 数据
  const newWorkout = {
    workoutname: workoutName,
    exercisesSelection: currentExercises
  };
  
  // 更新state（如果后续业务需要用到这个状态）
  setWorkout(newWorkout);
  
  // 直接用构造好的 newWorkout 添加文档
  await addDoc(workoutsCollectionRef, {
    workoutName: newWorkout.workoutname,
    exercises: newWorkout.exercisesSelection,
  });
};

方案2：通过useEffect监听state变化执行操作 #

如果必须依赖更新后的state来执行addDoc，可以用useEffect监听workout的变化，当状态更新完成后再触发添加操作，注意加条件避免组件初始化时的空状态触发：

const [workout, setWorkout] = useState({
  workoutname: "",
  exercisesSelection: [],
});

const SaveWorkout = () => {
  setWorkout(prevArr => ({
    ...prevArr,
    workoutname: workoutName,
    exercisesSelection: currentExercises
  }));
};

// 监听workout状态变化，有有效值时执行添加
useEffect(() => {
  if (workout.workoutname && workout.exercisesSelection.length > 0) {
    const addWorkoutDoc = async () => {
      await addDoc(workoutsCollectionRef, {
        workoutName: workout.workoutname,
        exercises: workout.exercisesSelection,
      });
    };
    addWorkoutDoc();
  }
}, [workout, workoutsCollectionRef]);

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