React Native集成Firebase手机号验证时PhoneAuthProvider不是函数如何解决

你的报错来源于PhoneAuthProvider的调用方式不符合Firebase JS SDK的语法规范，两个核心错误点如下：

• 实例化PhoneAuthProvider时缺少new关键字，且该构造函数挂载在全局导入的firebase.auth下，而非初始化后的Firebase实例下
• 调用credential静态方法时多余使用了new关键字，静态方法可直接调用无需实例化

修复步骤 #

1. 首先在你编写登录方法的文件顶部，补充导入firebase核心库：

import firebase from 'firebase/app';

2. 把loginUser方法里两处调用PhoneAuthProvider的代码替换为正确写法：

• 生成凭证的代码去掉new，修改为：

const credential = firebase.auth.PhoneAuthProvider.credential(
  verificationId,
  verificationCode
);

• 实例化手机号验证提供者的代码补充new，修改为：

const phoneProvider = new firebase.auth.PhoneAuthProvider();

完整修复后的登录方法参考 #

import firebase from 'firebase/app';
// 保留你原来的其他导入内容

const loginUser = async() => {
  switch(loginType){
    case 0:
    break;
    case 1:
      if (typeof(verificationId) == 'string') { 
        setLoading(true)
        try {
          // 修复：去掉new，从全局firebase.auth调用静态credential方法
          const credential = firebase.auth.PhoneAuthProvider.credential(
            verificationId,
            verificationCode
          );
          await Firebase.auth.signInWithCredential(credential);
          showMessage({ text: 'Phone authentication successful 👍' }); 
        } catch (err) {
          setLoading(false)
          showMessage({ text: `Error: ${err.message}`, color: 'red' });
        }
      } else {
        try {
            // 修复：补充new关键字，从全局firebase.auth实例化Provider
            const phoneProvider = new firebase.auth.PhoneAuthProvider();
            const verificationId = await phoneProvider.verifyPhoneNumber(
              phoneNumber,
              recaptchaVerifier.current
            );
            setVerificationId(verificationId);
            showMessage({
              text: 'Verification code has been sent to your phone.',
            });
        } catch (err) {
            showMessage({ text: `Error: ${err.message}`, color: 'red' });
        }
      }
    break;
  }
}

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