Firebase数据库获取数据报错：TypeError: collectionRef.get()不是函数

错误原因 #

• Firestore API版本不兼容：你使用的是Firebase v9+的模块化API，collection()返回的集合引用对象本身没有.get()方法，v9+中需要使用独立的getDocs()函数来获取集合数据，这是和v8及之前版本的命名空间API的核心差异。
• 嵌套数据访问风险：代码中doc.data().foods.Gyms.Restaurants的链式访问方式，如果文档中缺少foods、Gyms或Restaurants任一层级字段，会直接抛出新的类型错误，导致代码中断。

解决步骤 #

1. 修正数据获取API调用 #

首先导入Firestore的getDocs函数，替换原有的collectionRef.get()调用：

// 导入所需Firestore函数
import { collection, getDocs } from "firebase/firestore";
import { useState, useEffect } from "react";

const SelectCategory = () => {
  const [ data, setData ] = useState([]);
  const [ selectedOption, setSelectedOption] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const collectionRef = collection(db, "categories");
      try {
        // 使用getDocs替代collectionRef.get()
        const snapshot = await getDocs(collectionRef);
        const fetchedData = snapshot.docs.map((doc) => {
          const docData = doc.data();
          // 安全访问嵌套字段，避免层级缺失报错
          const label = docData?.foods?.Gyms?.Restaurants || "未命名分类";
          return {
            value: doc.id,
            label: label
          };
        });
        setData(fetchedData);
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    };
    fetchData();
  }, []);

  // 补充组件返回内容（原代码缺失）
  return (
    <div>
      {/* 此处添加你的选择器UI代码 */}
    </div>
  );
};

export default SelectCategory;

2. 安全处理嵌套数据访问 #

使用ES6的可选链操作符?.来访问嵌套字段，同时设置默认值，确保即使某个层级字段不存在，代码也能正常运行。

3. 验证Firestore实例初始化 #

确保你的db实例是通过v9+的API正确初始化的：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 你的Firebase配置信息
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // 正确初始化Firestore实例

内容的提问来源于stack exchange，提问作者David Akinola