React集成firebase报错firebaseApp未定义、firestore未定义如何解决

错误根源 #

你firebase.js里的firebase.initializeApp调用语法错误：该方法是函数，需要用圆括号()传递配置参数，你错误使用了方括号[]，导致firebaseApp没有被正确初始化，后续调用firebaseApp.firestore()自然会触发未定义报错。

修复后代码 #

firebase.js #

import firebase from 'firebase';

// 将原来的方括号[]替换为圆括号()即可
const firebaseApp = firebase.initializeApp({
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<PROJECT_ID>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "<MEASUREMENT_ID>"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();

export {
    auth,
    db
};

其他注意事项 #

• 检查你填入的配置参数都是从Firebase控制台复制的有效值，不要保留占位符
• 确认你已经在Firebase项目后台开启了Firestore服务
• 你当前使用的是v8版本的Firebase SDK，其余文件的导入和调用语法都符合版本要求，不需要额外修改。

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