Firestore中使用onSnapshot时，如何判断更新是否来自本地客户端？

当然可以判断，但Firestore不会直接提供这个来源信息，得借助它的元数据特性或者自定义标识字段来实现，下面分两种场景给你讲清楚：

1. 检测本地未同步的客户端写入 #

当你在当前客户端执行写入操作时，Firestore会先触发一次本地快照更新（这是它的"离线优先"特性），这时候文档快照的metadata.hasPendingWrites属性会是true——这是Firestore内置的标识，专门用来区分本地暂存的写入和已同步到服务器的写入。

代码示例：

window.notes = [];
const notesRef = refs.db.collection('notes');

notesRef.onSnapshot(querySnapshot => {
  querySnapshot.docChanges.forEach((docChange) => {
    const doc = docChange.doc;
    // 核心判断：是否是当前客户端发起的本地未同步更新
    const isInitiatedByCurrentClient = doc.metadata.hasPendingWrites;

    if (isInitiatedByCurrentClient) {
      console.log("这次更新是当前客户端刚刚发起的（还没同步到服务器）");
      // 这里可以做一些针对本地写入的特殊处理，比如高亮显示新添加的笔记
    }

    // 常规数据同步逻辑
    switch(docChange.type) {
      case 'added':
        window.notes.push({ ...doc.data(), id: doc.id });
        break;
      case 'modified':
        const index = window.notes.findIndex(note => note.id === doc.id);
        if (index !== -1) window.notes[index] = { ...doc.data(), id: doc.id };
        break;
      case 'removed':
        window.notes = window.notes.filter(note => note.id !== doc.id);
        break;
    }
  });
});

2. 检测已同步到服务器的客户端写入 #

如果要判断服务器同步后的更新是否来自当前客户端，hasPendingWrites就不够用了（这时候它会变成false）。这时候需要我们自己给每个写入的文档添加一个唯一的客户端标识：

• 第一步：生成一个唯一的客户端ID，存在本地存储里（比如用UUID）
• 第二步：每次写入文档时，把这个ID作为字段（比如clientId）一起写入
• 第三步：在onSnapshot回调里，对比文档的clientId和当前客户端的ID

代码示例：

// 初始化客户端ID（仅第一次访问时生成）
if (!localStorage.getItem('myFirestoreClientId')) {
  localStorage.setItem('myFirestoreClientId', crypto.randomUUID());
}
const currentClientId = localStorage.getItem('myFirestoreClientId');

// 写入文档时带上clientId
notesRef.add({
  content: "新笔记内容",
  clientId: currentClientId,
  createdAt: new Date()
});

// 在onSnapshot里判断服务器同步后的更新来源
notesRef.onSnapshot(querySnapshot => {
  querySnapshot.docChanges.forEach((docChange) => {
    const docData = docChange.doc.data();
    const isInitiatedByCurrentClient = docData.clientId === currentClientId;

    if (isInitiatedByCurrentClient) {
      console.log("这次更新是当前客户端之前发起的，已同步到服务器");
    }

    // 数据同步逻辑...
  });
});

补充说明 #

• 可以结合doc.metadata.fromCache辅助判断：如果fromCache为true且hasPendingWrites为true，那一定是当前客户端的本地写入；如果fromCache为true但hasPendingWrites为false，那是之前缓存的服务器数据。
• 自定义clientId时，crypto.randomUUID()是比较可靠的方式（需要浏览器支持，旧浏览器可以用第三方UUID库替代）。

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