react-redux-firebase与redux-firestore集成报TypeError错误如何解决？

你遇到的报错核心是两个版本不匹配问题：

• 你参考的是react-redux-firebase v2 版本的旧写法，v3 及以上版本已经移除了reactReduxFirebase、reduxFirestore这两个store增强器API，直接调用自然会报类型错误
• Firebase v9 重构为模块化API，和v8及之前的命名空间导入写法不兼容

步骤1：调整依赖版本 #

卸载原有firebase，安装v9兼容版本，同时匹配对应版本的绑定库：

npm uninstall firebase
npm install firebase@9.x-compat react-redux-firebase@3.11.0 redux-firestore@0.15.0

步骤2：修改config.js #

将导入路径改为compat兼容路径：

// config.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

const fbConfig = {
  // 填入你的Firebase应用配置
};

firebase.initializeApp(fbConfig);
// timestampsInSnapshots已默认开启，可删除此行
// firebase.firestore().settings({ timestampsInSnapshots: true });

export default firebase;

步骤3：修改Index.js #

移除废弃的增强器写法，改用新版的Provider包裹逻辑：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'
import {createStore, compose, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './store/reducers/rootReducer';
import thunk from 'redux-thunk';
import { createFirestoreInstance } from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebase from './config/fbConfig'

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({
      getFirebase,
      getFirestore: () => firebase.firestore()
    })),
  )
);

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}

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

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

步骤4：验证projectAction.js #

原有逻辑不需要修改，直接可以正常调用firestore.collection('projects').add方法写入你的projects集合。

如果后续不想用兼容包，可以改用纯模块化导入，所有Firebase操作都用新的addDoc、collection等API，不需要再依赖react-redux-firebase的getFirestore封装，直接在action里导入初始化好的firestore实例操作即可。

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