Firestore实时查询分页疑问：如何追加数据并持续监听？

方案一：扩展Limit的单订阅模式（推荐） #

这种方式逻辑简单，只需维护一个订阅，每次加载更多时扩大查询范围，自动同步所有已加载数据的实时更新。

1. 定义必要状态：

const [notifications, setNotifications] = useState([]);
const [currentLimit, setCurrentLimit] = useState(5);
const [unsubscribe, setUnsubscribe] = useState(null);
const authenticatedUser = useAuth(); // 假设你有获取当前用户的方法

2. 监听查询（依赖用户ID和当前Limit）：

useEffect(() => {
  if (!authenticatedUser?.uid) return;

  // 先取消旧订阅，避免内存泄漏
  if (unsubscribe) unsubscribe();

  const query = firestore()
    .collection('notifications')
    .doc(authenticatedUser.uid)
    .collection('notificationItems')
    .orderBy('createdDate', 'desc')
    .limit(currentLimit);

  // 创建新订阅
  const newUnsubscribe = query.onSnapshot(snapshot => {
    setNotifications(snapshot.docs);
  });

  setUnsubscribe(newUnsubscribe);

  // 组件卸载时清理订阅
  return () => {
    if (newUnsubscribe) newUnsubscribe();
  };
}, [authenticatedUser?.uid, currentLimit]);

3. 加载更多函数：

const loadMore = () => {
  setCurrentLimit(prev => prev + 5);
};

逻辑说明：

• 初始加载前5条数据，每次点击加载更多，Limit增加5，自动重新创建订阅获取前N条数据
• 所有已加载的数据都会实时同步更新，新数据插入顶部时会自动出现在列表最前面
• 无需维护多个订阅，代码简洁易维护

方案二：基于startAfter的多订阅模式 #

若不想重复获取已加载数据，可使用startAfter加载下一页，同时维护多个订阅分别监听不同分页。需注意处理新数据插入时的列表合并逻辑，避免数据覆盖。

1. 定义必要状态：

const [notifications, setNotifications] = useState([]);
const [lastVisible, setLastVisible] = useState(null);
const [subscribers, setSubscribers] = useState([]);
const authenticatedUser = useAuth();

2. 初始加载第一页：

useEffect(() => {
  if (!authenticatedUser?.uid) return;

  const initialQuery = firestore()
    .collection('notifications')
    .doc(authenticatedUser.uid)
    .collection('notificationItems')
    .orderBy('createdDate', 'desc')
    .limit(5);

  const unsubscribe = initialQuery.onSnapshot(snapshot => {
    const newDocs = snapshot.docs;
    setNotifications(prev => {
      if (prev.length === 0) {
        setLastVisible(newDocs[newDocs.length - 1]);
        return newDocs;
      }
      // 处理新插入的顶部数据，避免覆盖已加载内容
      const existingIds = new Set(prev.map(doc => doc.id));
      const addedDocs = newDocs.filter(doc => !existingIds.has(doc.id));
      setLastVisible(newDocs[newDocs.length - 1]);
      return [...addedDocs, ...prev];
    });
  });

  setSubscribers(prev => [...prev, unsubscribe]);

  // 组件卸载时清理所有订阅
  return () => {
    subscribers.forEach(unsub => unsub());
  };
}, [authenticatedUser?.uid]);

3. 加载更多函数：

const loadMore = () => {
  if (!lastVisible || !authenticatedUser?.uid) return;

  const nextQuery = firestore()
    .collection('notifications')
    .doc(authenticatedUser.uid)
    .collection('notificationItems')
    .orderBy('createdDate', 'desc')
    .startAfter(lastVisible)
    .limit(5);

  const unsubscribe = nextQuery.onSnapshot(snapshot => {
    const newDocs = snapshot.docs;
    if (newDocs.length === 0) return;

    setNotifications(prev => {
      // 合并新数据，同时处理已有数据的更新
      const existingMap = new Map(prev.map(doc => [doc.id, doc]));
      newDocs.forEach(doc => existingMap.set(doc.id, doc));
      const updatedList = [...prev, ...newDocs.filter(doc => !existingMap.has(doc.id))];
      setLastVisible(newDocs[newDocs.length - 1]);
      return updatedList;
    });
  });

  setSubscribers(prev => [...prev, unsubscribe]);
};

逻辑说明：

• 初始订阅监听第一页，加载更多时创建新订阅监听下一页
• 处理新数据插入时，将新增内容插入列表顶部，避免覆盖已加载的后续页数据
• 需维护多个订阅实例，组件卸载时统一清理

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