React+Firebase：如何用Where子句获取指定文档并展示数据？

你的问题出在data1是数组类型的状态，但你直接尝试访问data1.name——数组本身没有name属性，自然拿不到数据。

解决方法分两种场景： #

场景1：确定只有1个符合条件的文档（name字段唯一）

直接取数组的第一个元素，同时用可选链操作符?.避免初始加载时数组为空导致的报错：

<span className="printdata">{data1[0]?.name}</span>

如果要显示完整文档的所有内容，可以这样写：

{data1[0] && (
  <div className="printdata">
    <p>ID: {data1[0].id}</p>
    <p>Name: {data1[0].name}</p>
    {/* 其他字段同理 */}
  </div>
)}

场景2：可能有多个符合条件的文档

用map遍历数组，逐个渲染每个文档的内容：

<div className="printdata-list">
  {data1.map((item) => (
    <div key={item.id} className="printdata">
      <p>ID: {item.id}</p>
      <p>Name: {item.name}</p>
      {/* 其他字段按需添加 */}
    </div>
  ))}
</div>

额外说明 #

你的数据获取逻辑是没问题的，querySnapshot.forEach已经把符合条件的文档都存入了数组，只是渲染时没有正确访问数组内的元素。初始状态设为[]是合理的，因为Firebase查询返回的是多个文档的集合（即使只有1个结果）。

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