Expo集成Firebase手机号认证出现undefined is not a constructor错误问询

• 如果你使用的是 v9 及以上版本的 Firebase Web SDK，该版本采用模块化 API 设计，PhoneAuthProvider 不再支持无参数的直接实例化，原有的命名空间式调用方式已废弃。
• 导入路径错误：没有从 Firebase Auth 包中正确导入 PhoneAuthProvider 相关方法，或是混淆了 Firebase Web SDK 和 React Native Firebase（@react-native-firebase/auth）的 API 规范，两类包的 PhoneAuthProvider 用法完全不同。
• 部分旧版 Expo 配套的 Firebase 适配包未完全兼容 PhoneAuthProvider 原生调用逻辑，也可能触发该报错。

场景1：使用 Firebase Web SDK v9+（模块化写法） #

首先修正导入语句，初始化 Firebase 后拿到 auth 实例传入 PhoneAuthProvider 即可，正确写法示例如下：

// 前置导入和初始化代码
import { getAuth, PhoneAuthProvider, RecaptchaVerifier } from "firebase/auth";
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  // 替换为你自己的Firebase配置项
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

修改你的业务逻辑代码：

const sendVerificationCode = async () => {
  try {
    // 传入auth对象完成实例化
    const phoneProvider = new PhoneAuthProvider(auth);
    const verificationId = await phoneProvider.verifyPhoneNumber(
      phoneNumber,
      recaptchaVerifier.current
    );
    Alert.alert("Verification code has been sent to your phone.");
    navigation.navigate("Otp", {
      verificationId,
      phoneNumber,
    });
  } catch (err) {
    console.log(err);
  }
};

注意：Expo 中使用 Web 版 Firebase 短信认证需要先配置 reCAPTCHA 校验，你需要提前在组件中初始化 recaptchaVerifier 实例挂载到对应节点上。

场景2：使用 React Native Firebase（@react-native-firebase/auth）包 #

如果你用的是适配原生端的 React Native Firebase 库，不需要手动实例化 PhoneAuthProvider，直接调用封装好的 signInWithPhoneNumber 方法即可：

// 导入依赖
import auth from '@react-native-firebase/auth';

修改后的业务逻辑代码：

const sendVerificationCode = async () => {
  try {
    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
    Alert.alert("Verification code has been sent to your phone.");
    navigation.navigate("Otp", {
      verificationId: confirmation.verificationId,
      phoneNumber,
    });
  } catch (err) {
    console.log(err);
  }
};

注意：使用该包需要提前在 Expo 中安装对应的原生依赖，配置 Firebase 安卓/ iOS 端的项目信息，不需要配置 reCAPTCHA。

内容的提问来源于stack exchange，提问作者Wahas Ali Mughal