为了让 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: ""
};