React Native Expo项目无法导入Firebase JS SDK子模块问题问询

问题根因 #

你当前使用的Firebase 8.2.3为旧版本，采用的是命名空间式API设计，你代码中用到的getAuth()模块化调用方式、firebase/auth路径单独导出方法的特性，是Firebase 9.x及以上版本才支持的功能，版本不匹配导致导入的方法不存在报错。

解决方案 #

方案1：升级Firebase到9.x版本（适配你当前的代码写法） #

• 先卸载旧版本依赖：
  npm uninstall firebase
• 重新安装适配Expo的9.x版本：
  expo install firebase@9
• 保留你现有的代码写法即可，注意提前完成firebase app的初始化：

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth";

// 替换为你自己的firebase项目配置
const firebaseConfig = {
  // apiKey、authDomain等配置
};
const app = initializeApp(firebaseConfig);

方案2：保留现有8.2.3版本，修改代码为兼容写法 #

Firebase 8.x所有子模块方法都挂载在全局firebase对象上，不需要单独从子路径导出方法，修改你的代码如下：

import firebase from "firebase/app";
import "firebase/auth";
// 其他子模块同理引入即可：import "firebase/firestore"、import "firebase/database"

// 提前初始化firebase
if (!firebase.apps.length) {
  firebase.initializeApp({
    // 替换为你自己的firebase项目配置
  });
}

React.useEffect(() => {
 if (response?.type === "success") {
  const { id_token } = response.params;

  const auth = firebase.auth();      
  const provider = new firebase.auth.GoogleAuthProvider();
  const credential = provider.credential(id_token);
  auth.signInWithCredential(credential);
 }
}, [response]);

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