在firebase文件中没有定义firebaseApp。

Question

我的防火墙有一些问题，控制台说是没有定义的。我认为问题实际上来自我的firebaseApp或其他地方，但我不知道如何解决它。你们帮我真是太好了！非常感谢!

这是我的firebase.js：

import firebase from 'firebase';

const firebaseApp = firebase.initializeApp[{
    apiKey: "<API_KEI>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<PROJECT_ID>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "<MESURMENT_ID>"
}];

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

export {
    auth,
    db
};

这是我的SignIn.js：

import React from "react";
import firebase from "firebase";
import {
    auth
} from "../firebase.js";

function SignIn() {
    function signInWithGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }

    return ( <
        div >
        <
        button onClick = {
            signInWithGoogle
        } > Sign in with google < /button>{" "} <
        /div>
    );
}

这是我的App.js：

import React from 'react'
import SignIn from './components/SignIn'
import Chat from './components/Chat'

function App() {
    return ( <
        div >
        <
        SignIn / >
        <
        Chat / >
        <
        /div>
    )
}

export default App

这是我的package.json：

{
  "name": "image-search",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^8.10.0",
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-scripts": "4.0.3",
    "uuidv4": "^6.2.12",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5"
  }
}

Answer 1

您可以使用最新的防火墙并检查下面的文档。

在您的代码中，const db = firebaseApp.firestore();，但最新版本使用const db = getFirestore(app);初始化db。

这是一个来自官方网络的演示。

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

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

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

并在本页火力基地中找到更多信息