React中Firebase Realtime Database分页重复返回相同数据如何解决

问题原因 #

1. 你使用orderByChild('createdAt')按时间字段排序，但startAfter()传入的是帖子的key值，Firebase Realtime Database会将传入的参数和排序字段createdAt的值做对比，游标匹配失效，导致每次查询都返回最开头的2条数据。
2. getPosts中直接调用setPosts(posts)会覆盖之前已加载的帖子列表，而非追加新内容。
3. 分页拉取使用on('value')会新增不必要的实时监听器，容易引发内存泄漏和重复回调问题。
4. 缺少加载状态锁，滚动到底部时可能多次重复触发加载请求。

修改方案 #

1. 调整游标存储逻辑 #

将原来仅存最后一条帖子key的逻辑，改为同时存储最后一条的createdAt值和key，兼容存在相同创建时间的帖子的边界场景：

useEffect(()=>{
    if (posts.length>0){
        const lastPost = posts.at(-1)
        setLast({
            createdAt: lastPost.createdAt,
            key: lastPost.key
        });
    }
}, [posts]);

2. 新增加载状态锁 #

添加loading状态防止重复触发加载：

const [loading, setLoading] = useState(false)

3. 修正getPosts查询逻辑 #

调整startAfter参数，改为追加新帖子，使用once做一次性查询：

const getPosts = () => {
    if (loading || !last) return
    setLoading(true)
    fbRef.db.ref().child('/posts')
        .orderByChild('createdAt')
        .limitToFirst(2)
        // 先传排序字段的最后一个值，再传key做精准匹配
        .startAfter(last.createdAt, last.key)
        .once('value', (snapshot) => {
            const newPosts = []
            snapshot.forEach((childSnapshot) => {                
                newPosts.push({...childSnapshot.val(), key: childSnapshot.key});
            });
            if (newPosts.length) {
                setPosts(prev => [...prev, ...newPosts])
            }
            setLoading(false)
        });
}

4. 优化初始加载和滚动监听逻辑 #

修正初始加载的监听逻辑，避免重复累积数据，同时优化滚动判断的精度问题：

// 初始加载逻辑
useEffect(()=>{
    let isMounted = true;
    const postsRef = fbRef.db.ref().child('/posts').orderByChild('createdAt').limitToFirst(2)
    const handleSnapshot = (snapshot) => {
        if (!isMounted) return
        const posts = []
        snapshot.forEach((childSnapshot)=>{                
            posts.push({...childSnapshot.val(), key: childSnapshot.key});
        }); 
        setPosts(posts);
    }
    postsRef.on('value', handleSnapshot)
    window.addEventListener('scroll', loadMore);            
    return () => {
        isMounted = false
        postsRef.off('value', handleSnapshot)
        window.removeEventListener('scroll', loadMore)
    }
}, []);

// 滚动加载判断优化，解决像素精度导致触发失效的问题
const loadMore = ()=>{
    const scrollBottom = document.scrollingElement.scrollHeight - (window.innerHeight + document.documentElement.scrollTop)
    if (scrollBottom <= 1 && !loading){
        getPosts();
    }
}

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