如何在React TypeScript中实现Firestore onSnapshot滚动加载更多文档？

我目前通过 limit 从 Firestore 集合获取消息，代码如下：

const q = query(mesRef, orderBy(FirestoreConstants.timestamp, "desc"), limit(limitMessages))

const unSub = onSnapshot(q, (QuerySnapshot) => {
    let messages: Message[] = [];
    QuerySnapshot.forEach(d => {
        messages.push({ ...d.data() as Message });
    })
    console.log("We get messages now")
    _setMessages(messages.reverse());
})
// ----
return unSub

但当用户滚动到顶部时，我想获取更早的消息（即加载更多历史消息），该如何实现？

我已经在 Dart 中通过滚动监听器和流实现了相同功能：

_scrollListener() {
  if (!listScrollController.hasClients) return;
  if (listScrollController.offset >=
          listScrollController.position.maxScrollExtent &&
      !listScrollController.position.outOfRange &&
      _limit <= listMessage.length) {
    setState(() {
      _limit += _limitIncrement;
    });
  }
}

// ----

StreamBuilder<QuerySnapshot>(
     stream: chatProvider.getChatStream(_limit),
     builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
     // ----


// ----
Stream<QuerySnapshot> getChatStream(int limit) {
  return _firestoreInstance
      .collection(FirestoreConstants.pathChatMessages)
      .orderBy(FirestoreConstants.timestamp, descending: true)
      .limit(limit)
      .snapshots();
}

希望在 React TypeScript 中实现相同功能，最佳方案是什么？

最佳实现方案 #

1. 基础版本：沿用「递增 limit」逻辑 #

这种方式和你 Dart 中的实现逻辑一致，适合快速迁移，缺点是每次会重复获取已加载的消息。

状态管理

在组件中维护核心状态：

• *limitMessages*: 当前加载的消息数量上限
• *messages*: 存储已加载的消息列表
• *isLoading*: 加载状态（避免重复触发请求）
• *messageListRef*: 滚动容器的 DOM 引用，用于监听滚动事件

import { useState, useEffect, useRef } from 'react';
import { query, orderBy, limit, onSnapshot, QuerySnapshot } from 'firebase/firestore';
import { mesRef, FirestoreConstants } from './your-firestore-config';

type Message = {
  timestamp: Date;
  content: string;
  id?: string;
  // 其他消息字段
};

const ChatComponent = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [limitMessages, setLimitMessages] = useState(20); // 初始加载20条
  const [isLoading, setIsLoading] = useState(false);
  const messageListRef = useRef<HTMLDivElement>(null);

滚动监听逻辑

给消息容器添加滚动监听，判断是否滚动到顶部（对应需要加载更早的历史消息）：

useEffect(() => {
  const handleScroll = () => {
    if (!messageListRef.current || isLoading) return;
    // 滚动到顶部（距离顶部小于20px时触发加载）
    if (messageListRef.current.scrollTop <= 20) {
      setIsLoading(true);
      setLimitMessages(prev => prev + 20); // 每次新增20条
    }
  };

  const container = messageListRef.current;
  container?.addEventListener('scroll', handleScroll);
  return () => container?.removeEventListener('scroll', handleScroll);
}, [isLoading]);

Firestore 快照监听

更新查询的 limit 值，自动重新拉取数据并更新消息列表：

useEffect(() => {
  const q = query(
    mesRef,
    orderBy(FirestoreConstants.timestamp, "desc"),
    limit(limitMessages)
  );

  const unSub = onSnapshot(q, (snapshot: QuerySnapshot) => {
    const newMessages = snapshot.docs.map(doc => ({
      ...doc.data() as Message,
      id: doc.id // 保留文档ID用于渲染key
    })).reverse(); // 反转后得到正序消息（最早的在顶部）
    
    setMessages(newMessages);
    setIsLoading(false);
  });

  return unSub;
}, [limitMessages]);

渲染消息列表

给滚动容器绑定 ref，并渲染消息：

return (
  <div 
    ref={messageListRef}
    style={{ 
      height: '600px', 
      overflowY: 'auto',
      border: '1px solid #eee'
    }}
  >
    {isLoading && <div style={{ padding: '8px', textAlign: 'center' }}>加载更多...</div>}
    {messages.map(msg => (
      <div key={msg.id} style={{ padding: '8px', borderBottom: '1px solid #f5f5f5' }}>
        <p>{msg.content}</p>
        <small>{msg.timestamp.toLocaleString()}</small>
      </div>
    ))}
  </div>
);
};

export default ChatComponent;

2. 优化版本：使用 startAfter 避免重复请求 #

递增 limit 会重复拉取已加载的消息，性能较低。更优的方式是记录当前加载的最早消息时间戳，用 startAfter 只查询更早的历史消息：

修改状态与初始加载逻辑

const [messages, setMessages] = useState<Message[]>([]);
const [lastOldestTimestamp, setLastOldestTimestamp] = useState<Date | null>(null);
const [isLoading, setIsLoading] = useState(false);

// 初始加载最新的20条消息
useEffect(() => {
  const q = query(
    mesRef,
    orderBy(FirestoreConstants.timestamp, "desc"),
    limit(20)
  );

  const unSub = onSnapshot(q, (snapshot) => {
    const newMessages = snapshot.docs.map(doc => ({
      ...doc.data() as Message,
      id: doc.id
    })).reverse();
    
    setMessages(newMessages);
    // 记录当前加载的最早消息的时间戳（原查询是倒序，最后一条文档是最早的）
    if (snapshot.docs.length > 0) {
      const oldestDoc = snapshot.docs[snapshot.docs.length - 1];
      setLastOldestTimestamp(oldestDoc.get(FirestoreConstants.timestamp) as Date);
    }
    setIsLoading(false);
  });

  return unSub;
}, []);

滚动加载更多逻辑

useEffect(() => {
  const handleScroll = async () => {
    if (!messageListRef.current || isLoading || !lastOldestTimestamp) return;
    if (messageListRef.current.scrollTop <= 20) {
      setIsLoading(true);
      // 查询更早的消息：从lastOldestTimestamp之前的消息开始取20条
      const q = query(
        mesRef,
        orderBy(FirestoreConstants.timestamp, "desc"),
        startAfter(lastOldestTimestamp),
        limit(20)
      );

      const snapshot = await getDocs(q);
      const olderMessages = snapshot.docs.map(doc => ({
        ...doc.data() as Message,
        id: doc.id
      })).reverse();
      
      // 将更早的消息添加到列表头部
      setMessages(prev => [...olderMessages, ...prev]);
      // 更新最早消息的时间戳
      if (snapshot.docs.length > 0) {
        const oldestDoc = snapshot.docs[snapshot.docs.length - 1];
        setLastOldestTimestamp(oldestDoc.get(FirestoreConstants.timestamp) as Date);
      }
      setIsLoading(false);
    }
  };

  const container = messageListRef.current;
  container?.addEventListener('scroll', handleScroll);
  return () => container?.removeEventListener('scroll', handleScroll);
}, [isLoading, lastOldestTimestamp]);

这种方式每次只拉取新增的历史消息，避免重复请求，性能更优。

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