类型错误：firestore.collection 不是函数（React、Redux、Firestore）

Posted 2023-02-22

【中文标题】类型错误：firestore.collection 不是函数（React、Redux、Firestore）

【英文标题】：TypeError: firestore.collection is not a function (React ,Redux, Firestore)

【发布时间】：2020-09-15 01:18:24

【问题描述】：

将 firebase 和 firestore 与 react 集成时，我遇到了这个错误。

我已经关注了新的 react-redux-firebase 文档，但它没有帮助。

错误 -> 类型错误：firestore.collection 不是函数

这是我得到错误的函数

代码

export const addProductFamily = (productFamilyDetails) => 
  return (dispatch, getState,  getFirestore ) => 
    console.log("product family details ", productFamilyDetails);
    const firestore = getFirestore();
    console.log("firestore is ", firestore);
    firestore
      .collection("productFamilyDetails") <------------ error
      .add(
        ...productFamilyDetails,
      )
  ;
;

这是我设置所有配置的 App.js 文件

App.js

import  Provider  from "react-redux";
import  createStore, applyMiddleware, combineReducers, compose  from "redux";
import thunk from "redux-thunk";
import authReducer from "./store/reducers/auth";
import 
  ReactReduxFirebaseProvider,
  firebaseReducer,
  getFirebase,
 from "react-redux-firebase";
import 
  createFirestoreInstance,
  firestoreReducer,
  getFirestore,
  reduxFirestore,
 from "redux-firestore";
import  firebaseConfig  from "./config/fbConfig";
import firebase from "firebase/app";

const rrfConfig =  userProfile: "users", useFirestoreForProfile: true ;

const rootReducer = combineReducers(
  auth: authReducer,
  firebase: firebaseReducer,
  firestore: firestoreReducer,
);

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument( getFirebase, getFirestore )),
    reduxFirestore(firebaseConfig, firebase)
  )
);

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

ReactDOM.render(
  <Provider store=store>
    <ReactReduxFirebaseProvider ...rrfProps>
      <BrowserRouter>
        /* <App /> */
        <Layout />
      </BrowserRouter>
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

我已经删除了不必要的导入

【参考方案1】：

您调用 reduxFirestore 时的参数是反向的。改变这个：

reduxFirestore(firebaseConfig, firebase)

到这里：

reduxFirestore(firebase, firebaseConfig)