NuxtJS使用Firebase Auth短信登录报auth/argument-error错误如何解决

触发错误的常见原因 #

• Recaptcha容器实例化失败：实例化RecaptchaVerifier时，ID为recaptcha的DOM元素尚未渲染，Nuxt SSR环境下如果在服务端生命周期或者客户端挂载前执行这段代码，会因找不到DOM节点导致参数校验失败。
• 手机号格式不合法：this.phone为空、携带前导0、包含非数字字符，拼接后的号码不符合E.164国际号码格式，Firebase校验不通过。
• API版本混用：如果你使用的是Firebase v9及以上的模块化API，仍然沿用v8版本的链式调用写法，会因参数缺失、类型不匹配触发参数错误。
• Firebase Auth 初始化异常：Firebase未在客户端侧完成初始化，或者Auth实例未正常生成，调用相关方法时参数校验不通过。

排查解决步骤 #

• 调整代码执行生命周期：将登录逻辑放到mounted（Nuxt2）或者onMounted（Nuxt3）客户端生命周期中执行，同时确保页面存在对应DOM节点 <div id="recaptcha"></div>。
• 校验手机号参数：调用verifyPhoneNumber前打印拼接后的完整手机号，确认没有空值、多余字符，西班牙区号+34后的号码无需携带前导0。
• 匹配对应版本的API写法：
  如果你使用Firebase v9+模块化API，需调整为对应写法，示例如下：

  import { getAuth, RecaptchaVerifier, PhoneAuthProvider } from "firebase/auth";
  
  // 仅在客户端侧执行
  const auth = getAuth();
  const applicationVerifier = new RecaptchaVerifier('recaptcha', {
      'size': 'invisible',
      'callback': (response) => { 
        console.log('RECAPTCHA HECHO');
      }
  }, auth);
  const provider = new PhoneAuthProvider(auth);
  provider.verifyPhoneNumber('+34'+this.phone, applicationVerifier)
  .then((verificationId) => {
      this.verificationId = verificationId;
      console.log("Funciona", verificationId);
  })
  .catch((error) => {
      console.log("error", error);
  });
  

• 核对Firebase控制台配置：确认Phone登录功能已开启，当前访问域名已添加到Firebase控制台的授权域名列表中。

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