为应用程序创建上下文

首先，我们将为firestore访问创建一个上下文，并将应用程序与其提供程序（我们称之为AuthProvider） Package 在一起，我们将创建一个挂钩useAuth来访问必要的方法或访问firestore-db
让我们从创造一个环境开始-

import { initializeApp } from "firebase/app";
import {
  getAuth,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  signOut,
} from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import React from "react";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

let AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  let [initializing, setInitializing] = React.useState(true);
  let [user, setUser] = React.useState(null);

  let authChanged = React.useCallback((firebaseUser) => {
    if (firebaseUser) setUser(firebaseUser);
    setInitializing(false);

    console.log({ firebaseUser });
  }, []);

  React.useEffect(() => {
    const subscriber = onAuthStateChanged(auth, authChanged);
    return subscriber;
  }, [authChanged]);

  let signin = async (newUser, successCallback, errorCallback) => {
    setInitializing(true);
    try {
      let res = await signInWithEmailAndPassword(
        auth,
        newUser.email,
        newUser.password
      );
      if (res.user) return successCallback();

      return errorCallback("Wrong credentials");
    } catch (error) {
      return errorCallback("Something went Wrong.");
    }
  };

  let signout = async (callback) => {
    await signOut(auth);
    setUser(null);
    callback();
  };

  return (
    <AuthContext.Provider value={{ initializing, user, signin, signout, db }}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthProvider;
export { AuthContext };

现在我们要做的就是-

import React from "react";
import { AuthContext } from "./authProvider";

function useAuth() {
  return React.useContext(AuthContext);
}

export default useAuth;

现在我们已经创建了钩子，可以开始下一步了
注意：在登录屏幕中使用signin进行严格访问，而signout

与react-router-dom沿着

Package 所有需要访问firestore数据的路由，并使用以下组件（请使用react-router-dom作为路由）

export function RequireAuth({ children }) {
  let auth = useAuth();   // we'll create this hook to manage firbase auth and database access
  let location = useLocation(); // hook from react-router-dom

  if (auth.initializing) return null;

  if (!auth.user)
    return <Navigate to="/login" state={{ from: location }} replace />;

  return children;
}

现在，我们将从组件（路由）上的挂钩访问Firestore，如下所示

export default function Documents() {
  const [docs, setDocs] = React.useState([]);
  const [docsLoading, setDocsLoading] = React.useState(true);

  let { user, db } = useAuth();

  React.useEffect(() => {
    async function getUserDocuments() {
      setDocsLoading(true);
      const q = query(collection(db, "docs"), where("author", "==", user.uid));
      const querySnapshot = await getDocs(q);
      const tmpDocs = [];
      querySnapshot.forEach((doc) => {
        tmpDocs.push({ id: doc.id, data: doc.data() });
      });
      setDocs(tmpDocs);
      setDocsLoading(false);
    }

    getUserDocuments();
  }, []);

  return !docsLoading ? (
        docs.map((doc) => (/* show in ui */))
   ) : (
      <div>some loader... until we are loading data</div>
   )
)

我很乐意在评论中回答你的疑问：）

我也在努力寻找在react web应用程序中从Firestore管理服务器端状态的最佳方法--特别是考虑到Concurrent React的发布。
最后我写了自己的国家管理图书馆。
您可能需要查看@gmcfall/react-firebase-state，它使用侦听器来确保数据是新鲜的，并且在面对许多渲染周期和多个挂载/卸载周期时具有弹性。
你写的
..看起来（onSnapshot）会导致大量读写操作。
我的经验正好相反。我必须减少到服务器的次数，以确保数据是最新的。此解决方案的关键是让组件从保存服务器端状态的本地缓存中“租用”数据。但当数据的声明数量变为零时，实体不会立即从该高速缓存中驱逐。这样，如果用户短暂地导航离开组件，然后返回，或者如果并发渲染开始，数据仍然在那里，并且保证是最新的。