“string”类型的参数不可分配给“Auth”类型的参数

Question

我尝试在 firebase nextjs 中进行电话身份验证，但收到打字稿错误，因为“字符串”类型的参数不可分配给“Auth”类型的参数。

以下是我从 env.local 获取数据的 firebase 配置文件

// firebaseConfig.ts
import { initializeApp, FirebaseApp } from "firebase/app";
import { getAuth, Auth } from "firebase/auth";
import { getAnalytics, Analytics } from "firebase/analytics";
import { getFirestore, Firestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Initialize Firebase
const app: FirebaseApp = initializeApp(firebaseConfig);
const analytics: Analytics = getAnalytics(app);
const auth: Auth = getAuth(app);
const db: Firestore = getFirestore(app);

export { app, analytics, auth, db };

以下是出现电话验证重新验证错误的代码

import React, { useState } from "react";
import { RecaptchaVerifier, signInWithPhoneNumber, Auth } from "firebase/auth";
import { auth } from "@/app/lib/firebaseConfig"; // Ensure this path is correct
import CountrySelect from "./CountrySelect";
import PhoneNumberField from "./phoneNumber";
import { Country } from "@/app/types/types";

declare global {
  interface Window {
    confirmationResult: any;
  }
}

export interface PhoneWithCountryProps {
  setSelectedCountry: (country: Country | null) => void;
  selectedCountry: Country | null;
  setOtpState: React.Dispatch<React.SetStateAction<boolean>>;
  savedPhone: string;
  setSavedPhone: React.Dispatch<React.SetStateAction<string>>;
}

const validatePhoneNumber = (country: Country, number: string): boolean => {
  const countryCode = country.phone;

  switch (countryCode) {
    case "91":
      const indiaRegex = /^[6-9]\d{9}$/;
      return indiaRegex.test(number) && number !== "9876543210";

    case "971":
      const uaeRegex = /^5\d{8}$/;
      return uaeRegex.test(number);

    case "94":
      const sriLankaRegex = /^7\d{8}$/;
      return sriLankaRegex.test(number);

    case "968":
      const omanRegex = /^7\d{7}$/;
      return omanRegex.test(number);

    case "966":
      const saudiArabiaRegex = /^5\d{8}$/;
      return saudiArabiaRegex.test(number);

    default:
      return false;
  }
};

const PhoneWithCountry: React.FC<PhoneWithCountryProps> = ({
  setSelectedCountry,
  selectedCountry,
  setOtpState,
  savedPhone,
  setSavedPhone,
}) => {
  const [phone, setPhone] = useState("");
  const [error, setError] = useState("");

  const handleForwardButtonClick = () => {
    if (
      !error &&
      selectedCountry &&
      validatePhoneNumber(selectedCountry, phone)
    ) {
      const appVerifier = new RecaptchaVerifier(
        "recaptcha-container", -- this line is giving error --
        {
          size: "invisible",
        },
        auth
      );

      const phoneNumber = `+${selectedCountry.phone}${phone}`;

      signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          setSavedPhone(phone);
          setOtpState(true);
          // Store confirmationResult to verify the OTP later
          window.confirmationResult = confirmationResult;
        })
        .catch((error) => {
          setError("Failed to send OTP. Please try again.");
          console.error("Error during signInWithPhoneNumber:", error);
        });
    }
  };

  return (
    <>
      <div className="flex">
        <CountrySelect
          setSelectedCountry={setSelectedCountry}
          selectedCountry={selectedCountry}
        />
        <PhoneNumberField
          initialPhone={savedPhone}
          setPhone={setPhone}
          error={error}
          setError={setError}
          selectedCountry={selectedCountry}
          setOtpState={setOtpState}
          validatePhoneNumber={validatePhoneNumber}
          handleForwardButtonClick={handleForwardButtonClick}
        />
      </div>
      <div id="recaptcha-container"></div>
    </>
  );
};

export default PhoneWithCountry;

错误发生在这里：

      const appVerifier = new RecaptchaVerifier(
        "recaptcha-container", -- this line is giving error --
        {
          size: "invisible",
        },
        auth
      );

Answer 1

您没有正确使用

RecaptchaVerifier

API。 请参阅 API 文档了解 RecaptchaVerifier 构造函数：

constructor(
    authExtern: Auth,
    containerOrId: HTMLElement | string,
    parameters?: RecaptchaParameters
);

可以看到Auth参数排在第一位。 您传递的参数无序。 应该是这样的：

const appVerifier = new RecaptchaVerifier(
    auth,
    "recaptcha-container",
    { size: "invisible" },
);