Firebase OTP reCAPTCHA报错：无法读取未定义属性'appVerificationDisabledForTesting'

报错信息 #

recaptcha_verifier.ts:114 Uncaught TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')
    at new RecaptchaVerifier (recaptcha_verifier.ts:114:1)
    at generateRecaptcha (Home.js:123:1)
    at handleSend (Home.js:139:1)

问题代码 #

发送验证码逻辑 #

const handleSend = (event) => {
    event.preventDefault();

    generateRecaptcha();
    let appVerifier = window.recaptchaVerifier;
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
      })
      .catch((error) => {
        console.log(error);
      });
  };

生成reCAPTCHA实例逻辑 #

const generateRecaptcha = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
      "recaptcha",
      {
        size: "invisible",
        callback: (response) => {
          // reCAPTCHA solved, allow signInWithPhoneNumber.
        },
      },
      auth
    );
  };

解决方案 #

• 确认Auth实例初始化正确
  必须通过Firebase官方方法获取合法的Auth实例，不能使用未初始化或错误的对象：

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  // 填入你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app); // 这一步必须正确执行
  

• 统一Firebase SDK版本
  确保firebase/app和firebase/auth的版本完全一致，避免版本不匹配导致的属性缺失。检查package.json中的依赖版本，比如：

  {
    "dependencies": {
      "firebase": "^10.7.2" // 所有Firebase相关包用同一个版本
    }
  }
  

• 添加测试模式配置（本地开发用）
  如果是本地测试环境，可以手动开启测试模式，跳过真实的reCAPTCHA验证：

  const auth = getAuth(app);
  // 仅在本地测试时启用，生产环境务必移除
  auth.settings.appVerificationDisabledForTesting = true;
  

• 确保reCAPTCHA容器存在
  页面中必须存在id为recaptcha的DOM元素，即使是隐藏的容器：

  <div id="recaptcha"></div>
  

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