基于类的React项目中Firebase V9使用报错，无法获取数据求助

核心原因 #

Firebase V9采用了模块化树摇语法，默认不再支持V8及以前的链式调用（如db.collection('item').onSnapshot），如果你的firebase.js使用了标准模块化导出，直接用链式调用会触发编译错误。

解决方案 #

以下提供两种可行方案，推荐使用模块化语法（符合V9设计规范，减少打包体积）：

方案1：使用Firebase V9模块化语法（推荐） #

1. 确认../src/firebase.js配置正确

确保Firebase初始化代码使用模块化导入：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换为你的Firebase配置信息
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

2. 在类组件中正确调用onSnapshot

导入collection和onSnapshot方法，在生命周期中设置/取消监听：

import React, { Component } from 'react';
import db from '../firebase';
// 导入Firestore模块化方法
import { collection, onSnapshot } from 'firebase/firestore';

class App extends Component {
  state = { items: [] };
  // 保存监听取消函数，防止内存泄漏
  unsubscribeListener = null;

  componentDidMount() {
    // 获取集合引用
    const itemsCollection = collection(db, 'item');
    // 启动实时监听
    this.unsubscribeListener = onSnapshot(itemsCollection, (snapshot) => {
      const itemsList = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      this.setState({ items: itemsList });
    }, (error) => {
      console.error('获取数据失败:', error);
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听
    if (this.unsubscribeListener) {
      this.unsubscribeListener();
    }
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        <h2>Items List</h2>
        <ul>
          {items.map(item => (
            <li key={item.id}>{item.title || item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

方案2：使用Compat兼容模式（适配V8语法） #

如果习惯V8的链式调用，可以改用compat版本的Firestore：

1. 修改../src/firebase.js导入

import { initializeApp } from "firebase/app";
// 导入compat版本的Firestore
import { getFirestore } from "firebase/firestore/compat";

const firebaseConfig = { /* 你的配置信息 */ };

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default db;

2. 在类组件中使用链式调用

此时可以直接用你原来的写法：

import React, { Component } from 'react';
import db from '../firebase';

class App extends Component {
  state = { items: [] };
  unsubscribe = null;

  componentDidMount() {
    // 链式调用恢复可用
    this.unsubscribe = db.collection('item').onSnapshot((snapshot) => {
      const itemsList = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      this.setState({ items: itemsList });
    });
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  render() {
    // 渲染逻辑同上
  }
}

export default App;

关键注意事项 #

• 无论哪种方案，必须在组件卸载时取消onSnapshot监听，避免内存泄漏
• 模块化语法是Firebase V9的官方推荐方向，能有效减少最终打包体积
• 如果仍报错，检查是否安装了最新版的firebase依赖：npm install firebase或yarn add firebase

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