firebase 类型错误无法读取未定义的 appVerificationDisabledForTesting 的属性并验证我的代码中有什么问题我收到此错误

Question

这是我生成 otp 的代码：

import React, { useState } from "react";
import Layout from "./../../components/Layout/Layout";
import toast from "react-hot-toast";
import OtpInput from "otp-input-react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
import { Auth } from "../../firebase-config";

const ForgotPassword = () => {
  const [phone, setPhone] = useState("");
  const [otp, setOtp] = useState("");
  const [showOtpInterface, setShowOtpInterface] = useState(false);

  const onCaptchVerify = () => {
    try {
      // Create a new RecaptchaVerifier
      if (!window.recaptchaVerifier) {
        window.recaptchaVerifier = new RecaptchaVerifier(
          "recaptcha-container",
          {
            size: "invisible",
            callback: (response) => {
              onSignUp();
            },
            "expired-callback": () => {
              // Handle expiration if needed
            },
          },
          Auth
        );
      }
    } catch (error) {
      console.log(error);
    }
  };

  const onSignUp = () => {
    onCaptchVerify();
    const appVerifier = window.recaptchaVerifier;
    const formatStr = `+${phone}`;

    signInWithPhoneNumber(Auth, formatStr, appVerifier)
      .then((confirmationResult) => {
        window.confirmationResult = confirmationResult;
        setShowOtpInterface(true);
        toast.success("OTP sent successfully");
      })
      .catch((error) => {
        toast.error("OTP sent failed");
        console.log(error);
      });
  };

  const onOtpVerify = () => {
    window.confirmationResult
      .confirm(otp)
      .then(async (res) => {
        console.log(res);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  return (
    <Layout title={"Forgot Password - Ecommerce APP"}>
      <div className="form-container">
        <div>
          <h4 className="title">RESET PASSWORD</h4>
          <div id="recaptcha-container"></div>
          {showOtpInterface ? (
            <>
              <label htmlFor="ph">Enter Your OTP</label>
              <OtpInput
                OTPLength={6}
                otpType="number"
                disabled={false}
                autoFocus
                value={otp}
                onChange={setOtp}
              />
              <button
                type="submit"
                className="btn btn-primary mt-3"
                onClick={onOtpVerify}
              >
                Verify
              </button>
            </>
          ) : (
            <>
              <label htmlFor="email">Enter your registered phone number</label>
              <PhoneInput country={"in"} value={phone} onChange={setPhone} />
              <button
                type="submit"
                onClick={onSignUp}
                className="btn btn-primary mt-3"
              >
                Continue
              </button>
            </>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default ForgotPassword;

错误详细信息： 我特别在 RecaptchaVerifier 和 appVerificationDisabledForTesting 属性上苦苦挣扎。该错误表明这些属性未定义，尽管根据 Firebase 文档应该可以访问它们。 错误看起来像这样：

    at _verifyPhoneNumber (phone.ts:186:1)
    at signInWithPhoneNumber (phone.ts:108:1)
    at onSignUp (ForgotPasssword.js:43:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)
    at dispatchEvent (react-dom.development.js:6457:1)
    at dispatchDiscreteEvent (react-dom.development.js:6430:1)

TypeError: Cannot read properties of undefined (reading 'appVerificationDisabledForTesting')
    at new RecaptchaVerifier (recaptcha_verifier.ts:114:1)
    at onCaptchVerify (ForgotPasssword.js:19:1)
    at onSignUp (ForgotPasssword.js:39:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
    at batchedUpdates$1 (react-dom.development.js:26140:1)
    at batchedUpdates (react-dom.development.js:3991:1)
    at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)
    at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)
    at dispatchEvent (react-dom.development.js:6457:1)
    at dispatchDiscreteEvent (react-dom.development.js:6430:1)

我正在使用

"firebase": "^10.6.0",

请求帮助： 我正在向社区寻求有关解决此问题的任何见解或建议。如果有人在 Firebase 电话身份验证方面遇到类似问题或具有解决此类错误的专业知识，我们将非常感谢您的帮助！

Answer 1

Auth 应该是新 RecaptchaVerifier 中的第一个参数

new RecaptchaVerifier(
      Auth,
      "recaptcha-container",
      {
        size: "invisible",
        callback: (response) => {
          onSignUp();
        },
        "expired-callback": () => {
          // Handle expiration if needed
        },
      }
    );