React Native中使用Firebase手机号认证触发TypeError错误求助

错误原因 #

你错误调用了PhoneAuthProvider实例的verifyPhoneNumber方法，该方法并非Firebase Auth的合法API。Firebase v9+中，手机号验证需要使用从firebase/auth导入的独立verifyPhoneNumber函数，PhoneAuthProvider仅用于后续生成登录凭证。

修正后的代码 #

import {
  getAuth,
  createUserWithEmailAndPassword,
  verifyPhoneNumber,
  PhoneAuthProvider,
  signInWithCredential,
  onAuthStateChanged,
} from "firebase/auth";

const auth = getAuth();

async function handleVerifyPhoneNumber(phoneNumber) {
  try {
    // 使用独立的verifyPhoneNumber函数，传入auth实例和手机号
    const confirmation = await verifyPhoneNumber(auth, phoneNumber);
    setConfirm(confirmation);
  } catch (error) {
    console.error(error);
  }
}

<Button
  title="Verify Phone Number"
  onPress={() => handleVerifyPhoneNumber("你的手机号")}
/>

补充说明 #

• 确保手机号格式正确：需包含国家码（如+8613xxxxxxxxx），否则会触发验证失败。
• React Native环境无需额外验证器，直接调用verifyPhoneNumber即可；若为Web环境，还需配置RecaptchaVerifier。
• 后续验证验证码时，再使用PhoneAuthProvider生成凭证：

// 假设code是用户输入的验证码，confirmation是之前保存的ConfirmationResult
const credential = PhoneAuthProvider.credential(confirmation.verificationId, code);
await signInWithCredential(auth, credential);

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