React.js中Cloud Firestore文档读取格式异常，如何获取简洁数据？

我用React.js + Cloud Firestore开发应用，读取数据时拿到的是嵌套层级极深的格式，不是预期的简洁结构。

原Firestore文档结构：

{
  name: "John",
  age: 29,
  friends: ["Mike", "Sarah"]
}

但读取后得到的嵌套格式：

{
  mapValue:{
    fields:{
      name:{stringValue: "John"},
      age: {numberValue: 29},
      friends: {arrayValue:{values: [
        {stringValue: "Mike"},
        {stringValue: "Sarah"}
      ]}}
    }
  }
}

现在要访问"Mike"得写user.mapValue.fields.friends.arrayValue.values[0].stringValue，而不是简洁的user.friends[0]，处理大量嵌套数组数据时开发难度很高。

相关代码：

const [userData, setUserData] = useState({}) 
useEffect(()=>{
  async function getUser() {
    const q = query(collection(db, "teachers"), where("uid", "==", auth.currentUser.uid));
    const docs = await getDocs(q);
    setUserData(docs.docs[0]._document.data.value.mapValue.fields)
  }
  getUser()
}, [])
console.log(userData)

解决方案 #

你直接访问了Firestore SDK内部的_document属性，这是未公开的内部结构，所以拿到的是原始的protobuf格式数据。官方提供了data()方法可以直接将文档转换为简洁的JSON格式：

修改后的代码 #

const [userData, setUserData] = useState({}) 
useEffect(()=>{
  async function getUser() {
    const q = query(collection(db, "teachers"), where("uid", "==", auth.currentUser.uid));
    const docs = await getDocs(q);
    // 使用data()方法获取简洁格式
    if (!docs.empty) {
      setUserData(docs.docs[0].data())
    }
  }
  getUser()
}, [auth.currentUser?.uid])
console.log(userData)

关键说明 #

• data()方法会自动解析Firestore的原始字段格式，把stringValue、numberValue、arrayValue等转换为对应的JavaScript原生类型，直接得到{name: "John", age:29, friends: ["Mike", "Sarah"]}这样的结构。
• 增加docs.empty判断，避免查询结果为空时触发报错。
• 依赖项改为auth.currentUser?.uid，确保用户身份变化时自动重新触发查询。

如果需要批量处理多个查询到的文档，可通过遍历实现：

const allUsers = docs.docs.map(doc => doc.data())

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