我的当前环境是ReactJS 18.2.0，使用Firebase 10运行。

我目前遇到的问题是使用onAuthStateChanged在用户加载或登录页面时查询有关用户的数据。

以下是一个用于处理Firebase Auth的自定义服务的代码片段示例。

所有设置都是上下文的一部分，都是useState。

const subscribeToAuthChanges = (
  handleAuthChange,
  setLoadingState,
  setUserRole,
  setEmail,
  setFirstName,
  setIsActive,
  setLastName,
  setLocation,
  setUserID
) => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      handleAuthChange(user);

      FirebaseFirestoreService.getUserData(user.uid).then((data) => {
        setUserID(user.uid);
        setUserRole(data.role);
        setEmail(data.email);
        setFirstName(data.firstName);
        setIsActive(data.isActive);
        setLastName(data.lastName);
        setLocation(data.location);
      });
      setLoadingState(false);
    } else {
      setLoadingState(false);
    }
  });
};

FirebaseFirestoreService.getUserData()函数

const getUserData = async (id) => {
  const docRef = doc(db, "users", id);
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    return docSnap.data();
  } else {
    return null;
  }
};

这不应该在useEffect中运行，上下文被创建来处理这个问题。

import React, { useState } from "react";
import FirebaseAuthService from "../Services/FirebaseAuthService";

const FirebaseAuth = React.createContext({
  user: null,
  loading: true,
  role: "",
  email: "",
  firstName: "",
  isActive: false,
  lastName: "",
  location: "",
  userID: "",
});

export const FirebaseAuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState("");
  const [location, setLocation] = useState("");
  const [userID, setUserID] = useState("");

  const [loading, setLoading] = useState(true);

  FirebaseAuthService.subscribeToAuthChanges(
    setUser,
    setLoading,
    setRole,
    setEmail,
    setFirstName,
    setIsActive,
    setLastName,
    setLocation,
    setUserID
  );

  return (
    <FirebaseAuth.Provider
      value={{
        user,
        loading,
        role,
        email,
        firstName,
        lastName,
        isActive,
        location,
        userID,
      }}
    >
      {children}
    </FirebaseAuth.Provider>
  );
};

export default FirebaseAuth;

在这个例子中，我缺少一个查询字符串数组的设置函数，然而，以任何方式查询该数组都会导致onAuthStateChanged()不断循环，反复向Firebase发出读取请求。

有没有办法读取数组而不遇到这个问题？

我尝试通过循环遍历数组来避免遇到这个问题，然而，以任何方式查询它都会导致Firebase被反复POST请求。