请求将旧版Firebase查询转换为新版模块化语法（React场景）

原始旧版代码（命名空间写法） #

import firebase from 'firebase/app';
import 'firebase/firestore';

function PostComments({ postId }) {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase.firestore()
      .collection('posts')
      .doc(postId)
      .collection('comments')
      .onSnapshot(snapshot => {
        const newComments = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setComments(newComments);
      });

    return () => unsubscribe();
  }, [postId]);

  // 渲染逻辑
}

常见错误的改写尝试（问题点标注） #

// 错误：导入方式不对，新版需导入具体函数而非命名空间
import { firestore } from 'firebase/app'; 
import 'firebase/firestore';

function PostComments({ postId }) {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // 错误：新版不能直接调用firestore()，需使用初始化好的Firestore实例
    const unsubscribe = firestore() 
      .collection('posts')
      .doc(postId)
      .collection('comments')
      // 错误：新版onSnapshot是独立函数，不是集合引用的方法
      .onSnapshot(snapshot => {
        const newComments = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setComments(newComments);
      });

    return () => unsubscribe();
  }, [postId]);
}

正确的新版模块化代码 #

// 导入Firestore模块化函数
import { collection, doc, onSnapshot } from 'firebase/firestore';
// 导入预先初始化好的Firestore实例（通常在firebase.js中配置）
import { db } from './firebase'; 

function PostComments({ postId }) {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    // 构建posts/{postId}/comments的子集合引用
    const commentsCollectionRef = collection(doc(db, 'posts', postId), 'comments');

    // 调用独立的onSnapshot函数监听集合变化
    const unsubscribe = onSnapshot(commentsCollectionRef, snapshot => {
      const newComments = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setComments(newComments);
    });

    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, [postId]);

  // 渲染comments列表
  return (
    <div className="comments">
      {comments.map(comment => (
        <div key={comment.id} className="comment">
          <p>{comment.text}</p>
          <small>by {comment.author}</small>
        </div>
      ))}
    </div>
  );
}

关键差异说明 #

• 实例获取：新版需使用预先初始化的Firestore实例（db），而非firebase.firestore()动态创建
• 引用构建：子集合需先通过doc(db, 父集合名, 文档ID)获取父文档引用，再用collection(父文档引用, 子集合名)创建子集合引用
• 监听方式：onSnapshot是独立导出的函数，参数为集合/文档引用+回调函数，不再是引用的方法

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