如何获取Firebase Firestore中指定用户列表创建的所有文档并监听变更

原有代码核心问题 #

1. 将onSnapshot包裹在Promise中是错误用法，Promise只会resolve一次，后续数据库的新增、修改、删除操作都无法触发更新，无法实现实时监听。
2. 未做监听器的卸载处理，组件销毁后会产生内存泄漏。
3. 逐个用户发起查询的性能远低于批量查询，维护成本也更高。

优化后实现代码 #

import { useState, useEffect } from 'react';
import { db } from '你的firebase配置文件路径';
import useAuth from '你的useAuth钩子路径';
import Post from '你的Post组件路径';

export default function HomepageFeed({ friendList }) {
  const { currentUser } = useAuth();
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // 非法参数直接返回
    if (!currentUser?.uid || !Array.isArray(friendList)) return;

    // 目标查询用户：自己 + 所有好友
    const targetUserIds = [currentUser.uid, ...friendList];
    const unsubscribes = [];
    // Firestore in查询最多支持10个对比值，拆分批次处理
    const batchSize = 10;

    for (let i = 0; i < targetUserIds.length; i += batchSize) {
      const batchIds = targetUserIds.slice(i, i + batchSize);
      // 每个批次创建实时监听器
      const unsub = db.collection('posts')
        .orderBy('timestamp', 'desc')
        .where('userId', 'in', batchIds)
        .onSnapshot(snapshot => {
          // 转换快照数据格式
          const batchPosts = snapshot.docs.map(doc => ({
            id: doc.id,
            ...doc.data()
          }));
          // 合并去重 + 全局按时间倒序排序
          setPosts(prev => {
            const merged = [...prev.filter(p => !batchPosts.some(bp => bp.id === p.id)), ...batchPosts];
            return merged.sort((a, b) => b.timestamp?.toMillis() - a.timestamp?.toMillis());
          });
        }, err => {
          console.error('帖子查询失败：', err);
        });
      unsubscribes.push(unsub);
    }

    // 组件卸载/依赖变更时清理所有监听器
    return () => unsubscribes.forEach(unsub => unsub());
  }, [currentUser?.uid, friendList]);

  return (
    <div className='feed_container'>
      {posts.map(post => (
        <Post
          key={post.id}
          id={post.id}
          {...post}
        />
      ))}
    </div>
  );
}

特性说明 #

• 自动适配好友数量，不受Firestore in查询10个值的限制
• 实时响应所有数据变更，好友发布新帖、删除/编辑帖子都会自动同步到前端
• 内置去重、排序逻辑，始终展示按发布时间倒序排列的内容
• 自动处理监听器生命周期，无内存泄漏风险

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