Firebase手机号认证点击发送验证码报错Object is not a Function求助

问题原因 #

你遇到的报错是Firebase版本API调用不匹配导致的，具体错误点如下：

1. 你从config/Config导出的auth是已经完成初始化的Auth实例，不是可执行函数，代码中所有auth()的写法都会直接触发Object(...) is not a function报错。
2. 你用的是Firebase v9+模块化版本，RecaptchaVerifier、signInWithPhoneNumber都是独立导入的工具函数，不是挂载在auth实例上的方法，原调用方式完全错误。
3. 附加小问题：手机号state的更新函数拼写错误，setPhoenNumber应为setPhoneNumber（缺了字母n）。

修复方案 #

直接修改两处核心逻辑即可：

1. 修改setUpCaptcha函数 #

const setUpCaptcha = () => {
  window.recaptchaVerifier = new RecaptchaVerifier(auth, "recaptcha-container", {
    size: "invisible",
    callback: (response) => {
      console.log(response);
      console.log("Ok recaptcha solved");
      onSignInSubmit();
    },
  });
};

2. 修改onSignInSubmit里的验证码发送逻辑 #

const onSignInSubmit = (e) => {
  e.preventDefault();
  setUpCaptcha();
  const appVerifier = window.recaptchaVerifier;

  signInWithPhoneNumber(auth, PhoneNumber, appVerifier)
    .then((confirmationResult) => {
      window.confirmationResult = confirmationResult;
      console.log(confirmationResult);
    })
    .catch((error) => {
      console.log(error.message);
    });
};

3. 修正state拼写错误 #

把原代码

const [PhoneNumber, setPhoenNumber] = useState("");

改为

const [PhoneNumber, setPhoneNumber] = useState("");

修改完成后重新运行即可正常发送验证码。

内容的提问来源于stack exchange，提问作者Syed Behzad Hassan