React+Firebase开发：遍历Firestore Map对象报错求助

1. 先修正变量名冲突问题 #

你当前代码里，异步函数名和state变量名都是advertData，这会覆盖state变量，导致后续逻辑异常。先把函数名改成别的，比如fetchAdvertData：

const [advertData, setAdvertData] = useState(null);

// 修改函数名，避免和state变量冲突
const fetchAdvertData = async () => {
  try {
    const docRef = doc(getFirestore(), "dataIndex", s);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      console.log("Document data:", docSnap.data());
      setAdvertData(docSnap.data()); 
    }
  } catch (err) {
    console.error(err);
  }
}

2. 解决遍历Map对象的问题 #

Firestore返回的experienceLevel是键值对对象（不是数组），而map是数组专属方法，直接调用会报错。你需要先把对象的值提取成数组，再遍历：

如果只需要展示experienceLevel的值，可以用Object.values()方法：

{advertData ? (
  Object.values(advertData.experienceLevel).map((value, index) => (
    <div key={index}>
      <h2>Name: {value}</h2>
      <hr />
    </div>
  ))
) : (
  <p>加载中...</p>
)}

如果需要同时用到键和值，可以用Object.entries()：

{advertData ? (
  Object.entries(advertData.experienceLevel).map(([key, value], index) => (
    <div key={index}>
      <h2>Key: {key}, Value: {value}</h2>
      <hr />
    </div>
  ))
) : (
  <p>加载中...</p>
)}

额外说明 #

初始状态下advertData是null，用三元判断处理加载状态可以避免可选链嵌套过深的问题。如果不想写三元，也可以用可选链结合空值合并：

{Object.values(advertData?.experienceLevel || {}).map((value, index) => (
  <div key={index}>
    <h2>Name: {value}</h2>
    <hr />
  </div>
))}

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