Firebase获取用户文档时遇Cannot read properties of null错误及解决

我在开发一个仅允许管理员发帖的博客网站，为实现Admin Navbar组件，需要通过Firebase数据库验证用户是否为管理员。但在尝试将用户数据存入state时，使用用户uid获取文档出现错误：Cannot read properties of null (reading 'uid')。控制台能正常打印uid，但执行文档获取逻辑时出错。

原代码（AdminNav.jsx） #

const AdminNav = ({ user }) => {
  const [userData, setUserData] = useState([]);
  const id = auth.currentUser.uid;
  console.log(id); // Returning uid correctly
  useEffect(() => {
    db.collection("users")
      .doc(id) // Causing the problem
      .get()
      .then((querySnapshot) => {
        querySnapshot.docs.map((doc) => {
          setUserData((prev) => {
            return [...prev, doc.data()];
          });
        });
      });
    console.log(id); // Returning uid correctly
  }, []);
  if (user) {
    if (user.uid === userData[0].uid) {
      return <AdminNavbar />;
    } else {
      return null;
    }
  }
};

问题原因 #

错误核心是对Firebase的doc().get()方法返回值理解有误：该方法返回单个文档快照，而非包含多个文档的查询快照，因此不存在docs数组。原代码中对querySnapshot.docs执行map操作会导致逻辑失效，userData始终是空数组，后续访问userData[0].uid时自然触发"读取null的uid属性"错误。

解决后的代码 #

查阅Firebase文档后修正代码，问题解决：

const AdminNav = ({ user }) => {
  const [userData, setUserData] = useState({});
  const id = auth.currentUser.uid;
  useEffect(() => {
    db.collection("users")
      .doc(id)
      .get()
      .then((doc) => {
        setUserData(doc.data())
      });
  }, []);
  if (user) {
    if (user.uid === userData.uid) {
      return <AdminNavbar />;
    } else {
      return null;
    }
  }
};

修改要点 #

1. 将userData的初始state从数组[]改为对象{}，匹配单个用户数据的结构
2. 移除错误的docs.map操作，直接通过doc.data()获取单个用户的完整数据
3. 验证逻辑中直接使用userData.uid，不再依赖数组下标访问

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