React中useEffect从Firebase获取文档ID时刷新报错的问题

问题根源 #

1. 初始状态类型不匹配：你把userInfo的初始值设为空字符串""，但后续存入的是数组结构。页面刷新后组件首次渲染时，userInfo还是空字符串，此时访问userInfo[0]会直接返回undefined，自然无法读取id属性。
2. 异步加载时序问题：onSnapshot是异步执行的，组件首次渲染时数据还未加载完成，userInfo处于初始状态，直接访问数组元素会触发错误。

修复方案 #

1. 修正初始状态 #

将userInfo的初始值改为空数组，和后续存入的数据类型保持一致：

const [userInfo, setUserInfo] = useState([]);

2. 安全访问文档ID #

读取id前先检查数组是否有有效内容，推荐两种方式：

• 可选链操作符：简洁处理空值场景

// 安全获取第一个文档的id，无数据时返回undefined
const docId = userInfo[0]?.id;
console.log(docId);

• 条件判断：逻辑更明确

if (userInfo.length > 0) {
  const docId = userInfo[0].id;
  // 在此处使用docId调用其他函数
  console.log(docId);
}

完整修改后的代码 #

const [userInfo, setUserInfo] = useState([]);
const userID = auth.currentUser.uid;

// 自动获取用户数据
useEffect(() => {
    const q = query(collection(db, 'users'), where("uid", "==", userID));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
        setUserInfo(querySnapshot.docs.map(doc => ({
            id: doc.id,
            data: doc.data()
        })))
    });
    
    // 清理订阅，避免内存泄漏
    return () => unsubscribe();
}, [userID]) // 添加userID到依赖，确保auth.currentUser变化时重新查询

额外提示 #

• 务必在useEffect中返回订阅取消函数，防止组件卸载后出现内存泄漏。
• 把userID加入依赖数组，当auth.currentUser发生变化时，能自动重新发起查询，保证数据准确性。

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