Firebase 数据库不是 ReactJS 应用程序中的函数错误

Question

大家好，在尝试从 reactjs 应用程序使用 firebase 时，我不断收到 firebase.database() is not a function 错误

这是我如何从一个名为 Firebase.js

的文件初始化我的 firebase

import * as firebase from "firebase";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

class Firebase {
    constructor() {
        this.firebase = firebase.initializeApp(firebaseConfig);
    }
}

export default Firebase;

这是我的 FirebaseContext.js 文件

import React from "react";

const FirebaseContext = React.createContext(null);

export const FirebaseProvider = FirebaseContext.Provider;
export default FirebaseContext;

现在我的 index.js 文件中有这个

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import App from './pages/App';
import {BrowserRouter} from 'react-router-dom'
import Firebase from "./backend/configs/firebase";
import {FirebaseProvider} from "./contexts/FirebaseContext";

ReactDOM.render(
    <React.StrictMode>
        <FirebaseProvider value={new Firebase()}>
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        </FirebaseProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

现在，如果我像这样在我的一个功能组件中调用 firebase 对象

import FirebaseContext from "../contexts/FirebaseContext";
import React, {useContext, useEffect} from 'react';

export default function Dashboard() {
    const firebase = useContext(FirebaseContext);
    firebase
        .database()   //Firebase is not a function error happens here
        .ref("updates")
        .once('value')
        .then(function (snapshot) {
        });
}

在我上面的仪表板组件中，我不断收到 firebase.database() 不是函数的错误。请帮忙。 谢谢

Answer 1

我认为它应该是这样的：

const { firebase } = useContext(FirebaseContext);