如何在Firebase中获取引用文档数据？React开发场景实操问题

DevOps 小满

2026-10-6

问题原因

你打印出的gu对象是Firestore的*DocumentReference（文档引用）*类型，它只是指向对应user文档的指针，本身不存储文档的实际业务数据，需要主动查询这个引用对应的文档才能拿到数据。

解决方法

你需要基于拿到的引用实例，调用Firestore的查询方法获取实际数据，以下是两种常用场景的代码实现：

场景1：只需要一次性获取user数据，不需要实时监听变化

import { doc, onSnapshot, getDoc } from "firebase/firestore";

onSnapshot(doc(firestore, "cards", cardId), async (cardDoc) => {
    // 拿到user文档引用
    const userDocRef = cardDoc.data().uid;
    // 一次性查询user文档数据
    const userDocSnap = await getDoc(userDocRef);
    if (userDocSnap.exists()) {
        // 此处即可拿到user的实际业务数据
        const userData = userDocSnap.data();
        console.log(userData);
    }
});

场景2：需要实时监听关联的user文档的变化

import { doc, onSnapshot } from "firebase/firestore";

let userUnsubscribe = null;
onSnapshot(doc(firestore, "cards", cardId), (cardDoc) => {
    // 先取消之前的user监听，避免重复订阅
    if (userUnsubscribe) userUnsubscribe();

    const userDocRef = cardDoc.data().uid;
    // 监听user文档变化
    userUnsubscribe = onSnapshot(userDocRef, (userDocSnap) => {
        if (userDocSnap.exists()) {
            const userData = userDocSnap.data();
            console.log(userData);
        }
    });
});