React JS中如何访问Cloud Firestore V9文档的Map字段及含空格的键

问题根因 #

• 你通过getDoc拉取的是branchData单文档，docSnap.data()返回值是该文档的完整根对象，你将其推入数组后tempStore[0]对应文档根对象，根对象下没有直接声明name字段，name是嵌套在各个Map类型的子门店字段内的，因此直接调用tempStore[0].name会返回undefined
• 包含空格的对象键不支持点语法访问，需要使用方括号语法引用

字段访问示例 #

async function getSomethingTEST() {
  const docSnap = await getDoc(docRef);
  if (!docSnap.exists()) return;
  const rootDoc = docSnap.data();
  // 访问带空格的Map字段
  const asemJawaMap = rootDoc["Asem Jawa"];
  // 读取Map内的属性
  console.log(asemJawaMap.name); // 输出对应门店名称
  console.log(asemJawaMap.address); // 输出对应门店地址
  // 赋值给状态，你可以按需求选择存储结构：
  // 直接存文档对象更方便后续取值
  set_dataFB(rootDoc);
  // 如果你需要保持数组结构可以用下面的写法
  // set_dataFB([rootDoc])
}

useEffect自动触发示例 #

如果要替换为组件挂载时自动拉取，参考如下写法：

useEffect(() => {
  getSomethingTEST();
}, []);

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