React集成Firebase报错：firebase.firestore is not a function求助

问题核心在于你混用了Firebase v9+的模块化导入规范与v8的命名空间调用方式，以下是具体修复步骤：

1. 修正firebase.js文件 #

Firebase v9+采用模块化API，需替换旧导入方式并正确初始化Firestore实例：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 替换旧的导入，使用v9模块化API
import { getFirestore, serverTimestamp } from "firebase/firestore";
import { getAuth } from "firebase/auth";

// here i want to import the seed file
import { seedDatabase } from "../seed";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "something",
  authDomain: "something",
  projectId: "something",
  storageBucket: "something",
  messagingSenderId: "something",
  appId: "something",
  measurementId: "something",
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
// 初始化Firestore和Auth实例
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
// 替换错误的FieldValue获取方式
const FieldValue = serverTimestamp;

// 传入初始化好的db实例给seed函数
seedDatabase(db);

export { firebaseApp, analytics, db, auth, FieldValue };

2. 修正seed.js文件 #

现在接收的是Firestore实例，需使用v9的模块化方法操作数据库：

import { collection, addDoc } from "firebase/firestore";

export function seedDatabase(db) {
  const users = [
    {
      userId: "zUl6iYVhYJU7goNIw8U1vhno5v93",
      username: "Danier",
      fullName: "Danier Valiev",
      emailAddress: "Danier-1995@hotmail.com",
      following: ["2"],
      followers: ["2", "3", "4"],
      dateCreated: Date.now(),
    },
    {
      userId: "2",
      username: "raphael",
      fullName: "Raffaello Sanzio da Urbino",
      emailAddress: "raphael@sanzio.com",
      following: [],
      followers: ["zUl6iYVhYJU7goNIw8U1vhno5v93"],
      dateCreated: Date.now(),
    },
  ];
  
  // 使用v9的addDoc和collection方法
  for (let k = 0; k < users.length; k++) {
    addDoc(collection(db, "users"), users[k]);
  }

  for (let i = 1; i <= 5; ++i) {
    addDoc(collection(db, "photos"), {
      photoId: i,
      userId: "2",
      imageSrc: `/images/users/raphael/${i}.jpg`,
      caption: "Saint George and the Dragon",
      likes: [],
      comments: [
        {
          displayName: "dali",
          comment: "Love this place, looks like my animal farm!",
        },
        {
          displayName: "orwell",
          comment: "Would you mind if I used this picture?",
        },
      ],
      userLatitude: "40.7128°",
      userLongitude: "74.0060°",
      dateCreated: Date.now(),
    });
  }
}

3. 额外注意事项 #

• 确保只调用一次seedDatabase，可执行一次后注释代码，避免重复向Firestore添加数据
• 检查package.json中的firebase版本是否为v9及以上，若为v8版本需调整为对应写法，但推荐升级到v9+模块化API

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