Get reduxFirestore to work in react app.TypeError: getFirestore is not a function / ts(2345)

Question

为了让 reduxFirestore 在我的应用程序中工作，我尝试了以下方法：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import { createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

import { fbConfig, reduxFirebase as rfConfig} from './config/fbConfig';

firebase.initializeApp(fbConfig)
// firebase.firestore.settings({ timeStampsInSnapshots: true });
firebase.firestore()

const store = createStore(rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
    reduxFirestore(firebase, fbConfig) // COMPILATION ERROR HERE
  )
);

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

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

serviceWorkerRegistration.register();
reportWebVitals();

但是我在 reduxFirestore(firebase, fbConfig) 中得到一个编译错误说：

"message": "Argument of type 'typeof firebase' is not assignable to parameter of type 'typeof import(<PATH OF MINE/node_modules_index>)'.\n  Property 'firebase' is missing in type 'typeof firebase' but required in type 'typeof

如果我评论 reduxFirestore(firebase, fbConfig)out，我在调用 firestore 时会在操作中遇到此错误：

TypeError: getFirestore is not a function

操作代码：

import { Dispatch } from 'react';

type Action = {
  type:string,
  project?: {title:string, content:string}
  err?: unknown
}

export const createProject = (project:{title:string, content:string}) => {
  return (dispatch:Dispatch<Action>, getState:any, getFirestore:any ) => {
    // make async call to database
    const firestore = getFirestore(); // LINE WITH THE ERROR
    firestore.collection('projects').add({
      ...project,
      authorFirstName: 'Who',
      authorLastName: 'Ever',
      authorId: 12345,
      createdAt: new Date()
    }).then(() => {
      dispatch({ type:'CREATE_PROJECT', project});
    }).catch((err:unknown) => {
      dispatch({ type:'CREATE_PROJECT_ERROR', err })
    })
  }
}

我没有看到我缺少什么，因为 Javascript 中的同一个项目 reduxFirestore(firebase, fbConfig) 工作正常。

我也试过 reduxFirestore(fbConfig) 但我收到类型错误： Argument of type '{ apiKey: string; authDomain: string; projectId: string; storageBucket: string; messagingSenderId: string; appId: string; measurementId: string; }' is not assignable to parameter of type 'typeof import("PATH OF MINE/node_modules/firebase/index")'.

同时找到我的 fbConfig 的字段（我只共享字段，因为它与共享我的应用程序数据无关。在项目中当然在文件中）：

export const fbConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

Answer 1

最后我解决了它从 import firebase from 'firebase/app'; 获取 firestore 实例的问题：const db = firebase.firestore();。似乎有对 Firestore 的静态访问。似乎不再需要使用 reduxFirestore(firebase, fbConfig) 组合商店，因为这种对 firestore 的静态访问使得在对 firebase firestore 进行查询后异步分派操作成为可能，我认为这是 [=12= 的目的].

类似于@DanielOcando 在评论中建议的 here 提供的解决方法，但没有 getFirebase()，我在尝试解决此问题时无法访问，因为我无法传入reduxFirestore 函数

的 fbConfig

Get reduxFirestore to work in react app.TypeError: getFirestore is not a function / ts(2345)

Get reduxFirestore to work in react app.TypeError: getFirestore is not a function / ts(2345)

firebase

typescript

reactjs

google-cloud-firestore

redux-firestore