从Firebase文档读取URL数组并渲染为独立卡片的问题排查

核心问题 #

你当前只遍历了Firebase返回的文档列表，但每个文档内的urls是一个数组，没有对这个数组做二次遍历——直接输出数组会被React自动转为逗号分隔的字符串；同时代码里doc.urls.urls的取值路径错误，根据你的Firebase结构，应该直接取doc.urls。

修正步骤 #

1. 简化数据获取逻辑（避免async/await与then混用）：

const getInternalLinks = async () => {
  try {
    const snapshot = await db.collection("internallinks").get();
    // 直接用map转换文档数据
    const tempData = snapshot.docs.map(doc => doc.data());
    setInternalLinks(tempData);
  } catch (err) {
    console.error(err);
  }
};

2. 嵌套遍历生成独立Card：
   对每个文档里的urls数组再做一次map，为每个URL生成单独的Card，同时添加唯一key属性：

// 确保internalLinks初始状态为数组：const [internalLinks, setInternalLinks] = useState([]);
return (
  <div>
    {internalLinks.map((doc, docIndex) => (
      doc.urls.map((url, urlIndex) => (
        <Card key={`doc-${docIndex}-url-${urlIndex}`}>
          <p>{url}</p>
        </Card>
      ))
    ))}
  </div>
);

额外说明 #

• 如果你的Firebase文档结构实际是urls字段下嵌套了urls数组（比如urls: { urls: ["xxx", "xxx"] }），才需要使用doc.urls.urls，但从你提供的结构截图看，直接取doc.urls即可。
• 必须给每个通过map生成的组件添加唯一key，这里用文档索引+URL索引的组合保证唯一性，避免React渲染警告。

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