Vue(Quasar)项目Firebase短信认证报auth/argument-error错误

在Vue.js（Quasar）应用中接入Firebase手机号认证功能，配置不可见reCAPTCHA验证后运行抛出FirebaseError: Firebase: Error (auth/argument-error)错误。 #

• DOM容器配置错误：未给reCAPTCHA容器设置正确的id="recaptcha-container"属性，反而错误添加了if="recaptcha-container"无效属性，同时冗余配置了data-sitekey、data-callback等参数，与RecaptchaVerifier传入的配置冲突。
• 初始化时机错误：在created生命周期调用初始化方法，此时Vue实例尚未完成DOM挂载，页面不存在对应id的DOM节点，导致RecaptchaVerifier找不到容器抛出参数错误。

1. 修正模板代码 #

仅保留基础容器即可，无需额外配置reCAPTCHA相关属性：

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

如果需要控制容器显隐，使用Vue标准的v-if指令即可。

2. 调整初始化逻辑 #

将初始化调用时机改为mounted生命周期，确保DOM已完成挂载：

// 生命周期调整为mounted
mounted() {
  this.initializeCaptcha()
},
methods: {
  initializeCaptcha () {
    // Quasar SSR模式下需先判断window存在再执行
    if (typeof window === 'undefined') return
    window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
      size: 'invisible',
      callback: (response) => {
        console.log(response)
        // reCAPTCHA验证通过后执行手机号登录逻辑
      },
      'expired-callback': () => {
        // 验证过期，提示用户重新操作
      }
    }, auth)
  }
}

修改完成后运行项目，若未抛出错误且可以正常触发reCAPTCHA验证，即为修复完成。如果仍有报错，可以在初始化代码前添加console.log(document.getElementById('recaptcha-container'))，确认DOM节点可以被正常获取。

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