时间戳

首页 > 解决方案 > 让 reduxFirestore 在 react app.TypeError: getFirestore is not a function / ts(2345) 中工作

reactjs - 让 reduxFirestore 在 react app.TypeError: getFirestore is not a function / ts(2345) 中工作

问题描述

为了让 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)，我在调用 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: ""
};

标签： reactjstypescriptfirebasegoogle-cloud-firestoreredux-firestore

解决方案

最后我解决了它得到这样的firestore实例：const db = firebase.firestore();从import firebase from 'firebase/app';. 似乎对firestore有静态访问权限。似乎reduxFirestore(firebase, fbConfig)不再需要用它来组合存储，因为这种对 firestore 的静态访问使得可以在查询到 firebase firestore 后异步调度操作，我认为这是reduxFirestore(firebase, fbConfig).

类似于@DanielOcando 在评论中建议的解决方法，但没有getFirebase()，当我试图解决这个问题时我无法访问，因为我无法将 fbConfig 传递给reduxFirestore函数

推荐阅读