Firestore在Vue3项目中多次更新时数据滞后一步的问题

问题分析 #

你遇到的“修改后Firestore数据滞后一步”现象，核心原因大概率是传入updateDb的响应式数据存在引用延迟，或是Vue3响应式更新的异步特性导致提交时数据未完成同步。虽然控制台打印的json看起来正确，但实际传给Firestore的可能是更新前的快照（尤其是当数据是Proxy包装的响应式对象时，控制台展开会实时显示最新值，但代码执行时的实际值可能是旧的）。

解决方案 #

1. 传递数据快照而非响应式引用 #

在调用updateDb时，先将响应式数据转为普通对象/数组的快照，避免Proxy包装带来的延迟问题：

// 调用updateDb时深拷贝数据
updateDb(JSON.parse(JSON.stringify(income.value)), 'income');

或者在updateDb内部处理：

async function updateDb(
  json: Loan[] | CreditCard[] | Bill[] | Income[] | Payment[],
  name: string
) {
  if (currentUser.value === null) {
    return;
  }
  // 深拷贝生成数据快照
  const dataSnapshot = JSON.parse(JSON.stringify(json));
  console.log('updateDb', currentUser.value.uid, { [name]: dataSnapshot });
  try {
    await updateDoc(doc(db, 'users', currentUser.value.uid), {
      [name]: dataSnapshot,
    });
    console.log('数据更新成功');
    logEvent(analytics, 'update', {
      user: currentUser.value,
      name: name,
      json: dataSnapshot,
    });
  } catch (e) {
    console.error('更新失败', e);
    logEvent(analytics, 'update', {
      user: currentUser.value,
      name: name,
      json: dataSnapshot,
      error: e,
    });
  }
}

2. 确保数据更新的同步性 #

在弹窗提交时，确认编辑后的数据已经完全同步到原数组中。如果是使用ref数组，直接替换元素而非仅修改属性，确保响应式更新立即生效：

// 弹窗提交处理函数示例
const handleSaveEdit = (editedItem: Income, index: number) => {
  // 直接替换数组元素，触发响应式更新
  income.value[index] = { ...editedItem };
  // 立即调用更新
  updateDb(income.value, 'income');
};

3. 验证更新结果 #

在updateDoc执行后，立即读取Firestore文档验证是否更新成功，排除控制台缓存或视觉误差：

try {
  await updateDoc(doc(db, 'users', currentUser.value.uid), {
    [name]: dataSnapshot,
  });
  // 验证更新
  const docRef = doc(db, 'users', currentUser.value.uid);
  const updatedDoc = await getDoc(docRef);
  console.log('Firestore最新数据:', updatedDoc.data()?.[name]);
  // ...后续代码
}

4. 排查竞态条件 #

检查是否有其他地方同时对该Firestore文档进行读写操作，比如多个组件同时触发更新，导致后执行的操作覆盖了前一次的修改。可以通过添加日志或使用Firestore事务来避免冲突：

// 使用事务确保更新的原子性
try {
  await runTransaction(db, async (transaction) => {
    const docRef = doc(db, 'users', currentUser.value.uid);
    const docSnap = await transaction.get(docRef);
    if (!docSnap.exists()) {
      throw new Error('文档不存在');
    }
    transaction.update(docRef, { [name]: dataSnapshot });
  });
  console.log('事务更新成功');
} catch (e) {
  console.error('事务更新失败', e);
}

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