React中如何读写Firestore中的Map类型字段？

嘿，这个坑我之前踩过！你遇到的错误核心原因很明确：Firestore返回的cordinates是普通JavaScript对象，不是数组——而map()是数组专属的方法，所以才会抛出map is not a function的错误。下面给你拆解正确的读写和遍历方式：

一、正确遍历这个Map对象 #

因为它本质是JS对象，我们可以用对象相关的API来处理：

1. 遍历键值对（推荐，能拿到键和值） #

用Object.entries()把对象转换成键值对数组，之后就能用你熟悉的数组方法了：

// 转成键值对数组后遍历，同时过滤空值
Object.entries(data.cordinates).forEach(([key, value]) => {
  if (value) { // 跳过_04到_48这类空字符串
    console.log(`${key} - ${value}`);
  }
});

Object.entries()会把{_01:"copper", _02:"gold"}转成[["_01", "copper"], ["_02", "gold"]]，完美适配数组遍历逻辑。

2. 只遍历值 #

如果不需要键，用Object.values()直接提取所有值：

Object.values(data.cordinates).forEach(value => {
  if (value) console.log(value);
});

二、写入Firestore Map类型字段的正确方式 #

要往Firestore存这种Map结构，直接传普通JS对象就行，Firestore会自动识别为Map类型：

// 示例：更新现有文档（merge: true避免覆盖其他字段）
db.collection('你的集合名').doc('你的文档ID').set({
  cordinates: {
    _01: "copper",
    _02: "gold",
    _03: "iron",
    // 其他需要的键值对...
  }
}, { merge: true });

// 示例：新建文档
db.collection('你的集合名').add({
  cordinates: {
    _01: "copper",
    _02: "gold"
  }
});

额外建议 #

如果你的业务场景不需要固定的_01到_48这类键，其实可以把数据改成数组格式存在Firestore里（比如cordinates: ["copper", "gold", "iron"]），这样就能直接用map()方法了。但如果必须保留当前的键结构，上面的对象处理方式就是最优解。

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