React Native Firebase手机号认证报错：Can't find variable: document

问题根源 #

你遇到的这个错误其实很典型——你用的firebase.auth.RecaptchaVerifier是Web浏览器专属的API，它需要调用浏览器的document对象来渲染reCAPTCHA验证组件，但React Native是原生移动应用环境，根本不存在document这个浏览器专属的对象，所以直接照搬Web端的代码肯定会报错。

正确的实现方案（React Native专属） #

在React Native中，我们需要使用Firebase官方提供的React Native专用SDK（@react-native-firebase/auth），它会自动处理原生环境下的安全验证，不需要手动配置reCAPTCHA。

步骤1：确保使用正确的SDK

如果你还在使用Web版的Firebase SDK，赶紧切换到@react-native-firebase/auth。先安装依赖：

# 安装核心auth库
npm install @react-native-firebase/auth
# 若未安装firebase核心库，需先安装
npm install @react-native-firebase/app

然后按照官方指引完成iOS和Android的原生配置（比如iOS的Pod安装、Android的gradle配置等）。

步骤2：修改你的认证代码

把原来依赖RecaptchaVerifier的代码替换成以下React Native专用逻辑：

import auth from '@react-native-firebase/auth';

// 发起手机号认证请求
onButtonPress = async () => {
  const { pnum } = this.state;

  try {
    // React Native Firebase会自动处理设备级安全验证，无需手动reCAPTCHA
    const confirmationResult = await auth().signInWithPhoneNumber(pnum);
    // 保存验证结果，用于后续验证码校验
    this.confirmationResult = confirmationResult;
    // 这里可以跳转到验证码输入界面，或者显示输入框让用户填写验证码
    alert('验证码已发送，请查收');
  } catch (error) {
    console.error('认证请求失败:', error.message);
    alert(`请求失败: ${error.message}`);
  }
};

// 验证用户输入的验证码
onVerifyCode = async (inputCode) => {
  if (!this.confirmationResult) {
    alert('请先发起手机号认证请求');
    return;
  }

  try {
    const userCredential = await this.confirmationResult.confirm(inputCode);
    const loggedInUser = userCredential.user;
    console.log('登录成功:', loggedInUser);
    // 登录成功后的逻辑：比如跳转到主页、保存用户信息等
  } catch (error) {
    console.error('验证码验证失败:', error.message);
    alert(`验证码错误: ${error.message}`);
  }
};

关键注意点 #

• 不要在React Native中使用Web版Firebase的任何依赖浏览器的API（比如RecaptchaVerifier、document相关操作）。
• 确保你在Firebase控制台已经启用了手机号认证方式（在Authentication -> Sign-in method中开启）。
• 原生配置一定要到位：iOS需要确保Pod安装完成，Android需要添加对应的gradle依赖和配置。

这样修改后，你就可以避开document的问题，顺利实现React Native中的Firebase手机号认证了。

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