使用Firebase Firestore的useDocumentData时报ref.current.onSnapshot is not a function错误

算力阿峰

2026-10-1

问题排查与解决方案

核心报错原因

组件参数未正确解构：React 函数组件的第一个参数是完整 props 对象，你当前代码直接将参数命名为firebaseApp，实际拿到的是包含firebaseApp属性的 props 集合，而非你传入的 Firebase 实例本身。后续基于错误值初始化服务生成的文档引用是无效的，就会触发onSnapshot相关报错。
Firebase 服务未绑定实例：你调用getFirestore()、getAuth()时没有传入正确的 Firebase 实例作为参数，生成的db、auth并非绑定你项目的有效服务实例。
变量与初始化逻辑不规范：代码中的firebase、db、auth未用let/const声明，会隐式挂载为全局变量，同时写在组件顶层的初始化逻辑会在每次组件渲染时重复执行，容易引发不可预期的错误。
版本兼容问题：如果你使用的是 Firebase v9+ 模块化 SDK，需要搭配react-firebase-hooks v5 及以上版本使用，旧版本 hooks 仅兼容命名空间式的老版本 SDK，也会触发该类报错。

修正后代码示例

import { useMemo } from 'react';
import { getFirestore, getAuth, doc } from 'firebase/firestore';
import { useDocumentData } from 'react-firebase-hooks/firestore';

// 参数解构取出传入的 firebaseApp 实例
export default function TestingComponent({ firebaseApp }) {
    // 用 useMemo 缓存服务实例，避免重复初始化
    const db = useMemo(() => getFirestore(firebaseApp), [firebaseApp]);
    const auth = useMemo(() => getAuth(firebaseApp), [firebaseApp]);
    const userDocRef = useMemo(() => doc(db, "users", "Vx1JSJHadTWEyXloDVhY2GYd3e03"), [db]);

    console.log(db);
    console.log("getting data...")
    const [value, loading, error] = useDocumentData(userDocRef);

    // 后续组件逻辑
}