学习Net Ninja的Firebase教程时出现firebase.collection is not a function报错

问题原因 #

你跟随的2018年教程使用的是v8及更早版本的Firebase SDK，你当前安装的是v9+版本的Firebase，API调用方式和导入规则存在不兼容问题。

解决方案 #

1. 修正配置文件的导入路径 #

v9+版本的兼容模式下，所有子产品的导入都需要带compat路径，把你配置文件里的两行导入修改为：

import 'firebase/compat/firestore';
import 'firebase/compat/auth';

你配置里引入的模块化SDK的initializeApp、getAnalytics没有被使用，可以直接删除，避免和兼容模式的初始化逻辑冲突。

2. 校验Redux中间件配置 #

确认你初始化Redux Store时，已经正确注入了getFirestore实例到thunk的额外参数中，配置参考如下：

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { reduxFirestore, getFirestore } from 'redux-firestore';
import { reactReduxFirebase, getFirebase } from 'react-redux-firebase';
import firebaseConfig from './你的firebase配置文件路径';

const rootReducer = combineReducers({
  // 你的其他reducer逻辑
});

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

3. 修正易混淆的变量命名（非必须，可避免后续出错） #

你projectActions.js中将getFirestore()返回的实例命名为firebase容易产生混淆，建议修改为：

const firestore = getFirestore();
firestore.collection('projects').add({
  // 原有配置内容保持不变
})

修改完成后重新运行项目即可解决报错。

内容的提问来源于stack exchange，提问作者Jethro