onSnapshot 在超过 firebase 限制时不起作用

如何解决onSnapshot 在超过 firebase 限制时不起作用

我试图限制在我的网络应用程序中显示的消息数量，当我尝试使用 limit 和 orderBy 时，它在超过其限制（即 15）后停止显示新消息，所以我在哪里做错了吗？

PS：我试过 orderBy("createdAt","desc") ，它显示新消息，但按降序排列

代码：

useEffect(() => {
    const unsub = db
      .collection("messages")
      .orderBy("createdAt")
      .limit(15)
      .onSnapshot((snapshot) => {
        setMessages(
          snapshot.docs.map((doc) => ({ id: doc.id,msg: doc.data() }))
        );
      });
    return unsub;
  },[]);

解决方法

当使用仅附加列表时，您可以限制最初返回的值的数量，但仍然可以通过使用 limitToLast() 获得未来的添加：

db.collection("...")
  .orderBy("timestamp")
  .limitToLast(3)
  .onSnapshot(change => console.log(change.type,change.doc.id));

Here's a working example

,

您正在为仅这 15 个文档的更改建立侦听器 - 您已经限制了要监视的文档。查询正在做它应该做的事情。听起来这不是您真正想要的。

您可以只对 15 个文档进行提取 (.get())，然后根据您想要的任何事件（点击等）使用 .startAfter().get() 获取下一组。

如果（如果）您需要监视文档子集的更改，那么您需要在第一组文档上移除侦听器，并在下一组文档上创建一个新的侦听器。>

记住：onSnapShot() 是一个监听器，监听变化。如果这不是真正的要求，只需使用 .get()。

,

如果您想显示 15 条最新消息，这意味着您需要按降序创建进行订购：

db
  .collection("messages")
  .orderBy("createdAt","desc")
  ...

如果您仍想在底部显示最新消息，则必须在应用程序代码中反转消息。