React中使用react-redux-firebase时报firebase.database()不是函数错误

问题原因 #

你遇到的报错是版本不兼容导致的：当前稳定版react-redux-firebase@3.x仅适配Firebase 8及更低版本的命名空间式API，你使用的是Firebase 9+的模块化API，初始化后传递给ReactReduxFirebaseProvider的实例结构不符合预期，框架识别不到实时数据库的push方法，就抛出了这个异常。

解决方法 #

提供两种可直接落地的方案，二选一即可：

方案1：降级Firebase到v8（推荐，适配性最稳定） #

1. 卸载当前版本的Firebase：

npm uninstall firebase

2. 安装v8最新稳定版：

npm install firebase@8.10.0

3. 修改入口文件的Firebase初始化逻辑，替换为v8的写法：

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 firebase from "firebase/app";  
import "firebase/database";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";

const fbConfig = {
    // 原有配置保持不变
    apiKey: "**",
    authDomain: "**",
    projectId: "**",
    storageBucket: "**",
    messagingSenderId: "**",
    appId: "**",
    measurementId: "**",
    databaseURL: "firebase-rtdb-url**",
};

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")
);

修改完成后重启项目，原有组件代码不需要任何改动，点击Add按钮即可正常写入数据。

方案2：保留Firebase v9+，使用beta版react-redux-firebase #

如果需要使用Firebase v9的新特性，可以升级到兼容v9的beta版本：

1. 安装对应依赖：

npm install react-redux-firebase@beta @firebase/app-compat @firebase/database-compat

2. 修改入口文件的导入语句即可，其余初始化逻辑保持不变：

// 把原来的firebase导入替换为compat版本
import { initializeApp } from "@firebase/app-compat";
import "@firebase/database-compat";

补充说明 #

你的store.js配置和Todos组件代码本身没有问题，不需要做额外修改。

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