Firebase Firestore中collection导入失败问题求助

你用的Firebase版本是8.6.3（v8），但代码里采用了Firebase v9的模块化导入语法，这就是collection导入失败的原因——v8中并没有从firebase/firestore直接导出collection这个方法，而query、where等在v8中属于兼容导出，所以只有collection报错。

有两种可行的解决方式，选一种即可：

方案1：适配Firebase v8语法（无需升级） #

修改代码的导入和调用方式，符合v8的API规范：

1. 调整导入语句：

// 替换原来的导入
import firebase from "firebase/app";
import "firebase/firestore";

// 确保你已经完成Firebase初始化（比如在单独的config文件中）
const db = firebase.firestore();

2. 修改handleSearch函数中的查询逻辑：

const handleSearch = async () => {
  // v8中collection是db实例的方法，query通过链式调用构建
  const q = db.collection("users").where("displayName", "==", username);
  const querySnapshot = await q.get();
  
  querySnapshot.forEach((doc) => {
    console.log(doc.id, " => ", doc.data());
  });
};

方案2：升级到Firebase v9+（推荐长期维护） #

如果想使用模块化语法，直接升级Firebase版本：

1. 执行升级命令：

npm install firebase@latest

2. 确保Firebase初始化代码采用v9方式：

import { initializeApp } from "firebase/app";
import { getFirestore, query, where, getDocs, collection } from "firebase/firestore";

// 你的Firebase配置
const firebaseConfig = {
  // ... 你的配置内容
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // 这一步是关键，v9用getFirestore获取实例

3. 你原来的查询代码可以保留不动，因为v9的模块化语法和你现在写的一致。

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