React使用map访问键名未知的嵌套对象的问题咨询

解决方案 #

核心方法是用Object.values()提取对象的属性值，无需提前知道随机文档ID的具体值，具体实现如下：

方案1：先统一处理数据为标准结构

你可以先将接口返回的特殊格式数组转换为常规的业务对象数组，方便后续所有场景使用：

const data = [
  {
    randomdocid67233: {
      name: "ABC",
      latinName: "DEF" 
    }
  },
  {
    randomdocid6d7dddd233: {
      name: "GHI",
      latinName: "JKI" 
    }
  }
];

// 处理数据
const processedData = data.map(item => {
  // 提取单键对象的业务数据
  const businessData = Object.values(item)[0];
  // 可选：同时提取文档ID备用
  const docId = Object.keys(item)[0];
  return {
    docId,
    ...businessData
  }
})

处理后你可以直接通过字段名读取数据：

console.log(processedData[0].name) // 输出ABC
console.log(processedData[1].latinName) // 输出JKI

方案2：遍历渲染时直接提取

如果不需要提前处理数据，也可以在遍历渲染时直接取值，以React为例：

{data.map((item, index) => {
  const businessData = Object.values(item)[0]
  return (
    <div key={index}>
      <p>名称：{businessData.name}</p>
      <p>拉丁名：{businessData.latinName}</p>
    </div>
  )
})}

原理解释

Object.values()是ES2017引入的标准方法，会返回对象所有可枚举属性的值组成的数组。由于你从Firestore拿到的每个对象都只有1个属性（随机生成的文档ID），因此取数组的第一个元素即可直接拿到对应的业务数据，完全不需要提前知道文档ID的具体值。

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