firebase.database() 不是反应中的函数错误

Question

为了提供一些上下文，我尝试使用 redux-toolkit 和 react-redux-firebase 设置我的 React 应用程序（需要 firebase 实时数据库）。

我按照react-redux-firebase自述文件创建了这个文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { store } from "./app/store";
import { Provider } from "react-redux";
import * as serviceWorker from "./serviceWorker";
import { initializeApp } from "firebase/app";  
import "firebase/database"; // to enable using firebase RTD
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

const fbConfig = {
    apiKey: "**",
    authDomain: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**",
    databaseURL: "firebase-rtdb-url**",
};

let firebase = initializeApp(fbConfig);

const rrfConfig = {
    userProfile: "users",
};

const rrfProps = {
    firebase,
    config: rrfConfig,
    dispatch: store.dispatch,
};

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ReactReduxFirebaseProvider {...rrfProps}>
                <App />
            </ReactReduxFirebaseProvider>
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

store.js 只是使用 redux 工具包来创建和导出商店。

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import { firebaseReducer } from "react-redux-firebase";

export const store = configureStore({
    reducer: {
        counter: counterReducer,
        firebase: firebaseReducer,
    },
});

并使用react-redux-firebase网站上给出的演示代码

import React from "react";
import { useFirebase } from "react-redux-firebase";

export default function Todos() {
    const firebase = useFirebase();

    function addSampleTodo() {
        const sampleTodo = { text: "Sample", done: false };
        return firebase.push("todos", sampleTodo);
    }

    return (
        <div>
            <h1>New Sample Todo</h1>
            <button onClick={addSampleTodo}>Add</button>
        </div>
    );
}

当我单击“添加”按钮时，这是我得到的异常

如果需要其他任何内容来改进该问题，请告诉我。对此有何帮助？

提前致谢

Answer 1

由于您使用的是新的模块化 SDK，请确保将其用于所有 Firebase 服务：

import "firebase/database"; // Older name-spaced version

实时数据库的新模块化语法如下所示：

import { getDatabase } from "firebase/database" 

let firebase = initializeApp(fbConfig);

const db = getDatabase(firebase)

function addSampleTodo () {
   // Get a key for a new ToDo.
  const newTodoKey = push(child(ref(db), 'posts')).key;

  return update(ref(db), { updates['/todos/' + newTodoKey]: todoData });
}

您可以在文档中找到有关它的更多详细信息。如果您使用 Firebase JS SDK，则此设置有效v9+。

或者，您可以将导入更改为兼容版本以继续使用现有语法。

import firebase from "firebase/compat/app"
import "firebase/compat/database"
// import "firebase/compat/[SERVICE_NAME]"

// Also use the name-spaced syntax everywhere else then
firebase.initializeApp(fbConfig);