时间戳

首页 > 解决方案 > TypeError：firestore.collection 不是函数（React / Redux / Firestore）

javascript - TypeError：firestore.collection 不是函数（React / Redux / Firestore）

问题描述

问题很简单 - 当我尝试使用 Firestore / React / Redux 执行操作时，我收到此错误 -TypeError: firestore.collection is not a function在以下代码行中 -

export const addObject = (object) => {
    return (dispatch, getState, {getFirestore}) => {
    const firestore = getFirestore();
    const authorId = getState().firebase.auth.uid;

    firestore.collection('objects').add({ <==== THIS LINE
        ...object
    }).then(() => {
        dispatch({ type: 'ADD_OBJECT_SUCCESS' });
    }).catch(err => {
        dispatch({ type: 'ADD_OBJECT_ERROR' }, err);
    });
  }
};

在检查了组件道具等之后，我发现firestore确实似乎没有一个名为collection的功能。这没有任何意义，因为我发现的每个资源都是这样做的，而且通常，Firestore确实将集合作为一个函数（我之前使用过它，但没有使用 redux）。这是我下面的一些代码-

objectReducer.js

const initState = {}

const projectReducer = (state = initState, action) => {
    switch (action.type) {
        case 'CREATE_OBJECT_SUCCESS':
            console.log('create object success');
            return state;
        case 'CREATE_OBJECT_ERROR':
            console.log('create object error');
            return state;
        default:
            return state;
    }
};

export default projectReducer;

应用程序.js

const fbConfig = {
    // Configuration
}

const rrfConfig = {
    userProfile: 'users',
    useFirestoreForProfile: true,
    attachAuthIsReady: true
}

firebase.initializeApp(fbConfig)
firebase.firestore()

const rootReducer = combineReducers({
    auth: authReducer,  
    users: objectReducer,
    firebase: firebaseReducer,
    firestore: firestoreReducer
})

// Create store with reducers and initial state
const initialState = {}
const store = createStore(
    rootReducer, 
    initialState, 
    compose (
        applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
        reduxFirestore(fbConfig)
    )
)

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

function AuthIsLoaded({ children }) {
    const auth = useSelector(state => state.firebase.auth)
    if (!isLoaded(auth)) return <div>Loading, please wait...</div>;
    return children
}

function App() {
    return (
        <Provider store={store}>
            <ReactReduxFirebaseProvider {...rrfProps}>
                ...
            </ReactReduxFirebaseProvider>
        </Provider>
    );
}

我省略了所有导入和其他不必要的文件/代码。但是，如果有人需要更多信息，我很乐意提供。先感谢您！

标签： javascriptreactjsfirebasegoogle-cloud-firestorereact-redux

解决方案

index.js

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import fbConfig from './config/fbConfig';
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase';
import { reduxFirestore, getFirestore, createFirestoreInstance } from 'redux-firestore';
import firebase from 'firebase/app';

import { useSelector } from 'react-redux';
import { isLoaded } from 'react-redux-firebase';

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
    reduxFirestore(fbConfig, /* ***!NOTE =>*** */ firebase)
  )
);

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true,
};

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

firebaseConfig.js

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

const firebaseConfig = {
  apiKey: '*',
  authDomain: '*',
  databaseURL: '*',
  projectId: '*',
  storageBucket: '*',
  messagingSenderId: '*',
  appId: '*',
  measurementId: '*'
};

firebase.initializeApp(firebaseConfig);
firebase.firestore()

export default firebase;

这段代码对我有用我认为你的问题是你没有将firebase本身传递给reduxFirestore

reduxFirestore(fbConfig, firebase)

试试这个应该可以的

推荐阅读