安卓端Firebase手机号验证reCAPTCHA加载失败求助

问题概述 #

仅安卓端出现reCAPTCHA无法渲染的异常，iOS端功能正常。点击发送验证码按钮后，控制台记录错误：[Unhandled promise rejection: Error: Failed to load reCAPTCHA]，需求是通过Firebase手机号认证发送OTP实现登录功能。

相关导入代码 #

import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
import { firebaseConfig } from '../../config';
import firebase from 'firebase/compat/app';

核心代码片段 #

const Authentication = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [verificationId, setVerificationId] = useState(null);
  const recaptchaVerifier = useRef(null);
  const { checkNumber, setPostContactPhone } = useContext(PostContext); // 校验输入号码与之前输入的是否一致

  const sendVerification = () => {
    if (checkNumber === phoneNumber) {
      const phoneProvider = new firebase.auth.PhoneAuthProvider();
      phoneProvider
        .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
        .then(setVerificationId);
      setPhoneNumber('');
    } else {
      Alert.alert(`手机号不匹配，应为${checkNumber}`);
    }
  };
  const confirmCode = () => {
    const credential = firebase.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    firebase
      .auth()
      .signInWithCredential(credential)
      .then(() => {
        Alert.alert('OTP验证成功！');
      })
      .catch((error) => {
        alert(error);
        // alert('验证码错误！');
      });
  };

  return (
    // ... 其他元素
          <FirebaseRecaptchaVerifierModal
            ref={recaptchaVerifier}
            firebaseConfig={firebaseConfig}
          />
<Button
              style={styles.sendVerification}
              onPress={sendVerification}
            />
// .... 其他元素

问题详情 #

点击发送验证码按钮后，安卓设备上reCAPTCHA组件无法正常渲染，控制台抛出未处理的Promise拒绝错误：[Unhandled promise rejection: Error: Failed to load reCAPTCHA]，iOS端无此问题，整个认证流程可正常执行。

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