Firebase调用db.collection报is not a function错误如何解决

错误原因 #

你使用的是Firebase 9及以上的模块化版本SDK，该版本废弃了旧版db.collection()这类命名空间式的调用语法，因此会抛出方法不存在的类型错误。

解决方案 #

按照Firebase 9+模块化语法调整你的业务代码即可：

1. 首先从firebase/firestore中引入需要用到的collection、addDoc方法
2. 将原有的集合创建、新增文档的写法替换为模块化调用方式

修改后的业务代码示例 #

import  { db }  from "../firebase/firebase-config";
// 新增导入
import { collection, addDoc } from "firebase/firestore";

export const startNewNotes = () => {
  return async ( dispatch, getState ) => {
    const { uid } = getState().auth;

    const newNote = {
      title: '',
      body: '',
      date: new Date().getTime()
    }
    // 替换原有写法
    const doc = await addDoc(collection(db, `${uid}/journal/notes`), newNote)
  
    console.log(doc)
  }
}

可选方案（兼容旧版语法） #

如果你不想调整现有写法，可以切换到Firebase的兼容包导入方式，不过更推荐使用模块化写法，可以有效减小打包体积：

// firebase配置文件中替换导入方式
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

const firebaseConfig = {
  // 你的配置项保持不变
};

// 初始化写法换成旧版逻辑
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

export{
    db,
    googleAuthProvider
}

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