使用Redux createStore添加多个增强器时出现TypeError报错求助

这个报错我之前踩过坑，大概率是**react-redux-firebase版本与代码写法不兼容**导致的——你用的是v3+版本的库，但代码还在沿用v2版本的store enhancer写法，使得reactReduxFirebase(firebaseConfig)没有返回预期的函数，进而触发compose调用报错。另外也可能存在依赖版本不匹配的问题，下面给你两种可行的解决方案：

方案1：降级依赖适配现有代码 #

如果你不想大改代码结构，可以直接降级react-redux-firebase和redux-firestore到兼容v2写法的版本：

1. 先卸载当前版本：

npm uninstall react-redux-firebase redux-firestore

2. 安装兼容v2的稳定版本：

npm install react-redux-firebase@2.2.4 redux-firestore@0.8.0

3. 保持你原来的index.js代码不变，重新启动项目就应该能正常运行了。

方案2：升级代码适配v3+版本 #

如果你想使用最新版本的库，需要调整代码结构，改用官方推荐的Provider组件方式：

1. 确保安装了兼容的最新版本（如果已经是v3+可以跳过这步）：

npm install react-redux-firebase@latest redux-firestore@latest

2. 修改你的index.js代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import firebaseConfig from './config/firebaseConfig';
import firebase from 'firebase/app'; // 必须导入firebase核心包

// 初始化firebase实例
firebase.initializeApp(firebaseConfig);

// 创建store，仅保留中间件和redux-firestore增强器
const store = createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
  reduxFirestore(firebaseConfig)
);

// 配置react-redux-firebase的参数（根据你的业务需求调整）
const rrfConfig = {
  userProfile: 'users', // 用户资料存储的firestore集合名
  useFirestoreForProfile: true // 开启用firestore存储用户资料
};

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance: (config) => getFirestore(config)
};

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

3. 别忘了更新你的rootReducer，合并firestore和firebase的reducer：

// store/reducers/rootReducer.js
import { combineReducers } from 'redux';
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';

// 替换成你的其他自定义reducer
const customReducer = (state = {}, action) => {
  return state;
};

const rootReducer = combineReducers({
  firestore: firestoreReducer,
  firebase: firebaseReducer,
  custom: customReducer
});

export default rootReducer;

额外注意点 #

• 检查你的firebaseConfig配置项是否正确，不要有拼写错误或者缺失的字段；
• 如果你使用了Firebase的其他服务（比如Auth、Storage），确保在代码中导入对应的包（比如import 'firebase/auth'）。

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