React项目导入firebase/firestore提示collection未导出报错如何解决？

报错说明 #

控制台抛出错误：Attempted import error: 'collection' is not exported from 'firebase/firestore/'
相关截图：

问题原因 #

该问题由Firebase v9及以上版本的API架构调整+导入路径书写错误共同导致：

1. Firebase v9开始默认使用模块化tree-shakable API，废弃了v8版本的命名空间调用方式，导入规则和API使用方法和旧版本完全不同
2. 导入路径末尾多余的斜杠也会触发模块解析失败

解决方案 #

方案1：使用v9+ 标准模块化写法（推荐） #

1. 先确认已安装v9及以上版本Firebase SDK，执行命令查看版本：
   npm list firebase
2. 修正导入路径和初始化逻辑，参考示例代码：

// 导入核心和Firestore相关方法，注意路径末尾没有斜杠
import { initializeApp } from "firebase/app";
import { getFirestore, collection, getDocs } from "firebase/firestore";

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

// 初始化实例
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 调用collection方法示例：获取指定集合数据
const fetchCollectionData = async (collectionName) => {
  const colRef = collection(db, collectionName);
  const snapshot = await getDocs(colRef);
  return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
}

方案2：兼容v8旧写法（适合旧项目迁移） #

如果不想修改原有旧版本代码，可以导入兼容包：

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

const firebaseConfig = {
  // 你的配置
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
// 可直接使用旧版写法
db.collection('your_collection').get();

异常排查 #

如果修改后仍报错，执行以下操作重装依赖：

• 删除项目根目录的node_modules文件夹、package-lock.json或yarn.lock文件
• 重新执行npm install firebase或yarn add firebase

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