Firestore成员数组未填充Chat ID，实时多语言聊天网站故障排查

我正在开发一个支持用户用母语聊天的网站，采用Firebase扩展实现聊天内容实时翻译。集成完成后，创建了用于获取Chat ID、展示近期聊天的members数组，但该数组始终为空，长度保持为0。已打印members数组，结果仍显示长度为0；已更新Firebase规则，但问题依旧存在，终端右侧可见相关错误（见截图）。

获取Firebase成员查询的代码 #

import {db} from "@/firebase";
import {
    DocumentData,
    FirestoreDataConverter,
    QueryDocumentSnapshot,
    SnapshotOptions,
    collection,
    collectionGroup,
    doc,
    query,
    where,

} from "firebase/firestore";

export interface  ChatMembers {
    userId: string;
    email: string;
    timestamp: Date | null;
    isAdmin: boolean;
    chatId: string;
    image: string;

}

const chatMembersConverter: FirestoreDataConverter<ChatMembers>={
    toFirestore: function (member: ChatMembers): DocumentData{
        return {
            userId: member.userId,
            email:  member.email,
            timestamp: member.timestamp,
            isAdmin: !!member.isAdmin,
            chatId: member.chatId,
            image: member.image,
        };
    },
    fromFirestore: function(
        snapshot: QueryDocumentSnapshot,
        options: SnapshotOptions
    ): ChatMembers {
        const data = snapshot.data(options);

        return {
            userId: snapshot.id,
            email: data.email,
            timestamp:data.timestamp,
            isAdmin:data.isAdmin,
            chatId: data.chatId,
            image:data.image,
        };

       
    },
};
export const addChatRef =(chatId: string, userId: string) =>
 doc(db, "chats",chatId,"members",userId).withConverter(chatMembersConverter 
 );



 export const chatMembersRef =(chatId:string)=>
 collection(db,"chats",chatId,"members").withConverter(
    chatMembersConverter
 );

 export const chatMemberAdminRef=(chatId:string)=>
 query(
    collection(db,"chats",chatId,"members"),
    where("isAdmin","==",true)
 ).withConverter(chatMembersConverter);

export const chatMembersCollectionGroupRef=(userId:string)=>
 query(
    collection(db,"members"),
    where("userId","==",userId)
 ).withConverter(chatMembersConverter);

ChatListRows组件代码 #

"use client";

import { ChatMembers, chatMembersCollectionGroupRef } from "@/lib/converters/ChatMembers";
import { MessageSquare } from "lucide-react";
import { useSession } from "next-auth/react";
import { useCollectionData } from "react-firebase-hooks/firestore";
import CreateChatButton from "./CreateChatButton";
import ChatListRow from "./ChatListRow";

function ChatListRows({initialChats}:{initialChats : ChatMembers[] }) {

  const { data: session } = useSession();
  

  const [ members, loading, error]= useCollectionData<ChatMembers>(
    session && chatMembersCollectionGroupRef(session?.user.id!),
    {
      initialValue: initialChats,
    }
  );
  

  if(members?.length === 0)
  return (
   <div className="flex flex-col justify-center items-center pt-40 space-y-2">
    <MessageSquare className="h-10 w-10"/>
    <h1 className="text-5xl font-extralight">Welcome!</h1>
    <h2 className="pb-10">
      Create your first chat.
    </h2>
    <CreateChatButton isLarge/>

   </div>

    );

 return (
  <div className="">
    {members?.map((member,i)=>(
      <ChatListRow key={member.chatId} chatId={member.chatId}/>
    ))}
  </div>
  );
  
};
export default ChatListRows;

排查关键点 #

• 集合组查询方法错误：chatMembersCollectionGroupRef中使用collection(db,"members")是错误的，集合组查询应该调用collectionGroup(db, "members")，因为members是嵌套在chats下的子集合，集合组查询需要指定子集合名称而非直接用collection方法。
• 字段匹配问题：转换器fromFirestore中将snapshot.id赋值给userId，但查询条件是where("userId","==",userId)。如果Firestore文档内的userId字段与文档ID不一致，查询会无结果。要么确保文档内userId字段正确存储，要么修改查询条件为where(__name__, "==", userId)（需从firebase/firestore导入__name__）。
• Firebase规则权限：确认规则允许集合组查询，针对chats/{chatId}/members/{memberId}路径的读取权限需正确配置，例如：

  match /chats/{chatId}/members/{memberId} {
    allow read: if request.auth.uid == resource.data.userId;
  }
  

• 会话状态延迟：useSession初始化时可能返回undefined，导致查询未执行。需添加加载状态判断，在session未就绪时显示加载提示，避免直接触发空数组渲染逻辑。
• 初始值覆盖问题：检查initialChats是否为空数组，若为空，即使查询有结果，组件挂载时也会暂时显示为空，直到Firestore返回数据。可移除initialValue或确保initialChats是服务端预取的有效数据。

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