Firestore查询报错：无法读取undefined的data属性，如何解决？

错误根源 #

你碰到的Cannot read properties of undefined (reading 'data')错误，主要是两个原因：

• API调用混淆：getDocs是用来查询多个文档的，它返回的QuerySnapshot对象本身没有.data()方法——.data()是单个DocumentSnapshot才有的方法。如果是查单个文档，应该用getDoc（单数）而非getDocs（复数）。
• 查询结果为空：就算用对了API，要是目标文档不存在，返回的DocumentSnapshot会是无效状态，这时候直接调用.data()就会报错。

正确写法示例 #

场景1：查询单个文档（用getDoc） #

import { doc, getDoc } from "firebase/firestore";
import { db } from "./firebaseConfig"; // 你的Firebase配置文件

const queryGetOneDoc = async (docPath) => {
  try {
    const docRef = doc(db, docPath); // 示例路径："users/12345"
    const docSnap = await getDoc(docRef);
    
    if (docSnap.exists()) {
      console.log("文档数据：", docSnap.data());
      return docSnap.data();
    } else {
      console.log("目标文档不存在");
      return null;
    }
  } catch (error) {
    console.error("查询失败：", error);
    throw error;
  }
};

// React组件中结合useEffect使用
import { useEffect } from "react";

function YourComponent() {
  useEffect(() => {
    const fetchData = async () => {
      await queryGetOneDoc("users/12345");
    };
    fetchData();
  }, []);

  return <div>组件内容</div>;
}

场景2：查询多个文档（用getDocs） #

如果确实需要查询多个文档，得遍历QuerySnapshot里的docs数组：

import { collection, query, getDocs } from "firebase/firestore";
import { db } from "./firebaseConfig";

const queryGetDocs = async (colPath) => {
  try {
    const q = query(collection(db, colPath));
    const querySnapshot = await getDocs(q);
    
    const dataList = [];
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} 的数据：`, doc.data());
      dataList.push({ id: doc.id, ...doc.data() });
    });
    return dataList;
  } catch (error) {
    console.error("查询失败：", error);
    throw error;
  }
};

关键注意事项 #

• 不管用await还是.then/.catch，都要先通过docSnap.exists()判断文档是否存在，避免在无效对象上调用方法。
• React组件里的异步查询必须放在useEffect（或自定义hook）中，不能直接写在组件顶层，否则会导致重复执行或渲染异常。
• 必须添加错误捕获（try/catch或.catch），否则会出现你看到的Uncaught (in promise)未处理报错。

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