React Native接入Firebase手机号认证RecaptchaVerifier构造报错求助

错误根因 #

你引用的RecaptchaVerifier是Firebase Auth专为Web环境提供的API，依赖浏览器DOM和window全局对象，React Native原生环境不存在这些Web能力，所以构造器会识别为undefined。同时你参考的是Web端接入文档，不适用React Native场景。

修复方案 #

• 首先移除Web版Firebase Auth相关的导入，改用React Native专属的Firebase封装库
• 第一步安装对应依赖：

# 安装核心依赖
npm install @react-native-firebase/app @react-native-firebase/auth
# iOS环境需要额外执行Pod安装
cd ios && pod install && cd ..

• 第二步调整手机号认证逻辑，React Native Firebase的Auth模块已经内置了原生端的校验能力，不需要手动实现reCAPTCHA，修正后的参考代码如下：

import React, { useState } from "react";
import {
  Text,
  View,
  TouchableOpacity,
  TextInput
} from "react-native";
import auth from '@react-native-firebase/auth';

const WelcomeScreen = ({ navigation }) => {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleContinue = async () => {
    try {
      // 手机号需要携带国家码，例如中国手机号以+86开头
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
      // 把返回的验证对象传给验证码页
      navigation.navigate("Verification", { confirm: confirmation });
    } catch (error) {
      console.log('认证发起失败：', error);
    }
  };

  function ContinueButton() {
    return (
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={handleContinue}
      >
        <Text>获取验证码</Text>
      </TouchableOpacity>
    );
  }

  // 其余页面渲染逻辑可自行补充
  return (
    <View>
      <TextInput
        placeholder="请输入手机号"
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        keyboardType="phone-pad"
      />
      <ContinueButton />
    </View>
  )
}

export default WelcomeScreen;

• 第三步补全配置：确保你已经在Firebase控制台开启了手机号登录权限，同时在React Native项目的Android、iOS目录下分别放入了从Firebase控制台下载的google-services.json和GoogleService-Info.plist配置文件。测试阶段可以在Firebase Auth控制台设置测试手机号和固定验证码，避免频繁发送真实短信。

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