如何使用Cloud Firestore模块化Web SDK v9获取文档及嵌套集合、完成v8代码迁移

首先确保你已经完成Firebase v9的基础初始化，且提前导入所需的模块化方法：

import { getFirestore, doc, onSnapshot, collection, query, orderBy } from "firebase/firestore";

// 初始化db和原有逻辑一致
const db = getFirestore();

转换后的useEffect逻辑如下，完全对应你原有v8版本的两个实时监听需求：

useEffect(() => {
  if (roomId) {
    // 监听指定room文档的实时变化，对应原v8的db.collection('rooms').doc(roomId).onSnapshot逻辑
    const roomDocRef = doc(db, "rooms", roomId);
    const unsubRoom = onSnapshot(roomDocRef, (snapshot) => {
      setRoomName(snapshot.data().name);
    });

    // 监听文档下嵌套的messages子集合、按时间正序排列，对应原v8的collection("messages").orderBy逻辑
    const messagesColRef = collection(db, "rooms", roomId, "messages");
    const messagesQuery = query(messagesColRef, orderBy("timestamp", "asc"));
    const unsubMessages = onSnapshot(messagesQuery, (snapshot) => {
      setMessages(snapshot.docs.map(doc => doc.data()));
    });

    // 组件卸载时取消监听避免内存泄漏，原v8版本也建议补充该逻辑
    return () => {
      unsubRoom();
      unsubMessages();
    };
  }
}, [roomId])

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