React- Firebase: Uncaught TypeError: firebase.firestore is not a function

Question

因此，我尝试了“类似问题”中的方法，但没有运气，因此制作了新方法。

我有2个文件，

1：firebase.js：

 // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import "firebase/firestore"; import "firebase/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // here i want to import the seed file import { seedDatabase } from "../seed"; // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional 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); const FieldValue = initializeApp.firebase; // here is where i want to call the seed file (Only once) // seedDatabase(firebase); console.log("firebaseApp", firebaseApp); seedDatabase(firebaseApp); export { firebaseApp, analytics, FieldValue };

第二个文件：seed.js：

 export function seedDatabase(firebase) { 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(), }, ]; // eslint-disable-next-line prefer-const for (let k = 0; k < users.length; k++) { firebase.firestore().collection("users").add(users[k]); } // eslint-disable-next-line prefer-const for (let i = 1; i <= 5; ++i) { firebase .firestore() .collection("photos") .add({ 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(), }); } }

在我的 console.log 中，我收到此错误：

seed.js:43 Uncaught TypeError: firebase.firestore is not a function
at seedDatabase (seed.js:43:1)
at ./src/lib/firebase.js (firebase.js:34:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.js (firebase.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1

如果您想查看 index.js，这是那里的代码：

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import FirebaseContext from "./context/firebase"; import { firebaseApp, analytics, FieldValue } from "./lib/firebase"; ReactDOM.render( <FirebaseContext.Provider value={{ firebaseApp, analytics, FieldValue }}> <App /> </FirebaseContext.Provider>, document.getElementById("root") );

我似乎无法弄清楚问题所在。 我也尝试删除 package.lock.js 和 node_module，清除缓存并重新安装 node_module，但仍然没有运气。 有人能帮我解决这个问题吗？

谢谢你。

Answer 1

首先，您混合了两种不同的语法。 Web 版本 8 是 Firestore 的点表示法，Web 版本 9 是 Firestore 的模块化语法。 如果您仍想使用 web 版本 8，那么您需要在使用最新的 Firebase 包时使用compat版本。 请参阅以下示例代码：

firebase.js：

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';
import 'firebase/compat/auth';
    
const firebaseConfig = {
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const analytics = firebaseApp.analytics();
const auth = firebase.auth();

const FieldValue = db.FieldValue;

export { db, analytics, FieldValue, auth };

index.js ：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import FirebaseContext from "./context/firebase";
import { db, analytics, FieldValue, auth } from "./lib/firebase";

ReactDOM.render(
  <FirebaseContext.Provider value={{ db, analytics, FieldValue, auth }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById("root")
);

种子.js ：

for (let k = 0; k < users.length; k++) {
    db.collection("users").add(users[k]);
}

// eslint-disable-next-line prefer-const
for (let i = 1; i <= 5; ++i) {
    db
    .collection("photos")
    .add({
    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(),
    });
}

---

有关更多信息，您可以查看以下文档：

• 从版本 8 升级到模块化 Web SDK