React项目调用Firestore取数失败，报FirebaseError类型错误

问题原因 #

你传入getDocs的membersCollectionRef是一个函数，但getDocs要求参数是Firestore的集合引用（CollectionReference）类型，类型不匹配导致了这个报错。你用useCallback包裹了一个返回集合引用的函数，但调用getDocs时没有执行这个函数来获取实际的引用。

解决方案 #

方法1：调用函数获取集合引用 #

在getDocs中执行membersCollectionRef()，拿到实际的集合引用后再传入：

import { useState, useEffect, useCallback } from "react";
import { db } from "../utils/firebase-config";
import { collection, getDocs } from "firebase/firestore";

export default function MemberPage() {
  const [members, setMembers] = useState([]);
  const membersCollectionRef = useCallback(() => collection(db, "members"), []);

  useEffect(() => {
    const getMembers = async () => {
      // 调用函数获取集合引用
      const data = await getDocs(membersCollectionRef());
      setMembers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    getMembers();
  }, [membersCollectionRef]);

  return (...);
}

方法2：直接在useCallback中返回集合引用（更简洁） #

调整useCallback的写法，让membersCollectionRef本身就是集合引用，而不是返回引用的函数：

import { useState, useEffect, useCallback } from "react";
import { db } from "../utils/firebase-config";
import { collection, getDocs } from "firebase/firestore";

export default function MemberPage() {
  const [members, setMembers] = useState([]);
  // 直接返回集合引用，不再包裹函数
  const membersCollectionRef = useCallback(collection(db, "members"), []);

  useEffect(() => {
    const getMembers = async () => {
      const data = await getDocs(membersCollectionRef);
      setMembers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    getMembers();
  }, [membersCollectionRef]);

  return (...);
}

额外优化：无需useCallback的场景 #

如果你的db实例不会发生变化，甚至可以省略useCallback，直接定义集合引用即可——因为collection返回的引用是稳定的，不会触发不必要的组件重渲染：

import { useState, useEffect } from "react";
import { db } from "../utils/firebase-config";
import { collection, getDocs } from "firebase/firestore";

export default function MemberPage() {
  const [members, setMembers] = useState([]);
  // 直接定义集合引用
  const membersCollectionRef = collection(db, "members");

  useEffect(() => {
    const getMembers = async () => {
      const data = await getDocs(membersCollectionRef);
      setMembers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    getMembers();
  }, [membersCollectionRef]);

  return (...);
}

内容的提问来源于stack exchange，提问作者Adrian Grzelka