angular - firestore onSnapshot 执行两次

Question

我的 firestore onSnapshot() 函数被调用两次。

let user = firebase.firestore().collection('users').doc(userID).onSnapshot
({                    
    next: (documentSnapshot: firebase.firestore.DocumentSnapshot) =>
    {
         this.userArray.push(documentSnapshot as User);
         console.log(documentSnapshot);
         //here
    },
    error: (firestoreError: firebase.firestore.FirestoreError) =>
    {
         console.log(firestoreError);
         //here
    }
});

我也尝试过像 https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener 那样订阅通过在//here 注释中包含 user() 但无济于事。

如何修改以使该函数仅执行一次，即每次仅推送一个用户对象而不是两次。

Answer 1

不知道这是否与你的问题有关。如果有人正在使用

firebase.firestore.FieldValue.serverTimestamp()

给文档一个时间戳，然后 onSnaphot 将触发两次。这似乎是因为当您向数据库添加新文档时， onSnapshot 将触发，但 serverTimestamp 尚未运行。几毫秒后，serverTimestamp 将运行并更新您的文档 => onSnapshot 将再次触发。

我想在 onSnapshot 触发之前添加一个小的延迟(例如 0,5 秒左右)，但我找不到执行此操作的方法。

您还可以为 onCreate 事件创建一个服务器端函数，我相信这可以解决您的问题。也许您的 userArray.push-action 更适合在服务器端执行。

<小时/>

更新:要了解有关 serverTimestamp() 的行为以及它为何触发监听器两次的更多信息，请阅读本文:The secrets of Firestore’s FieldValue.serverTimestamp() — REVEALED! 。另外，官方文档指出:

When you perform a write, your listeners will be notified with the new data before the data is sent to the backend.

文章中提供了几个建议的解决方案，其中之一是使用 snapshot 的 metadata 属性来查找 的 bool 值是否为metadata.hasPendingWrites 为 true(它告诉您正在查看的快照尚未写入服务器)或 false。

例如，在您的情况下，您可以检查 hasPendingWrites 是否为 false，然后推送对象:

if ( !documentSnapshot.metadata.hasPendingWrites ){
  // This code will only execute once the data has been written to the server 
  this.userArray.push(documentSnapshot as User);
  console.log(documentSnapshot);
}

在更通用的示例中，代码如下所示:

firestore.collection("MyCollection")
.onSnapshot( snapshot => {

    if ( snapshot.metadata.hasPendingWrites ){
        // Local changes have not yet been written to the backend
    } else {
        // Changes have been written to the backend
    }

});

在文档中找到的另一个有用的方法如下:

If you just want to know when your write has completed, you can listen to the completion callback rather than using hasPendingWrites. In JavaScript, use the Promise returned from your write operation by attaching a .then() callback.

我希望这些资源和各种方法能够帮助任何试图找出解决方案的人。

引用文献:

• Events for local changes
• The hasPendingWrites metadata property
• Snapshot Listen Options