Next.js中使用Firestore onSnapshot获取用户UID报错问题

我使用Next.js框架开发，手动操作Firestore时能正常获取用户UID，但通过代码用onSnapshot获取数据时失败。

写入数据代码 #

const getData = async () => {
  await setDoc(doc(db, 'data', user.uid), {
    name: 'T-shirt',
    descrption: 'nice t-shirt for winter',
    price: 300,
  });
};

获取数据代码 #

useEffect(() => {
  onSnapshot(doc(db, 'data', user?.uid), (doc) => {
    setItems(doc.data());
    console.log(doc.data());
  });
}, [user]);

报错信息 #

TypeError: Cannot read properties of undefined (reading 'indexOf')

问题原因与解决方法 #

这个报错是因为user?.uid在组件渲染初期可能为undefined，导致Firestore的doc()函数接收到无效的文档ID参数，进而触发内部逻辑错误。

1. 增加身份状态判断，避免无效调用

修改获取数据的代码，先确认user和user.uid存在再执行onSnapshot，同时记得清理订阅防止内存泄漏：

useEffect(() => {
  if (!user?.uid) return;
  
  const unsubscribe = onSnapshot(doc(db, 'data', user.uid), (doc) => {
    setItems(doc.data());
    console.log(doc.data());
  });

  return () => unsubscribe();
}, [user]);

2. 优化写入数据的代码

同样给写入逻辑加上判断，避免user.uid不存在时执行无效操作：

const getData = async () => {
  if (!user?.uid) return;
  
  await setDoc(doc(db, 'data', user.uid), {
    name: 'T-shirt',
    descrption: 'nice t-shirt for winter',
    price: 300,
  });
};

3. 检查用户状态加载时机

Next.js中用户身份信息通常是异步加载的（比如通过Firebase Auth、NextAuth等工具），组件挂载初期user对象可能还未初始化完成。可以在组件外层加加载状态提示，确保用户状态就绪后再渲染相关数据操作逻辑。

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