使用useEffect获取Firebase Firestore数据时读取嵌套字段报undefined错误

触发这个报错和Firebase权限、网络问题无关，全是代码逻辑层面的问题：

• 状态结构和访问逻辑错配
  两个存文档的状态初始值都设成了数组useState([])，但拿到单文档后直接把doc.data()返回的普通对象塞进了状态。这时候写campaign[0]、currentCampaign[0]本质是取对象上键为0的不存在属性，拿到的永远是undefined，读后续嵌套字段自然会触发报错。
• 异步时序差
  Firestore的get()是异步网络请求，组件首次渲染时请求根本没返回，状态还是初始空值，此时直接在渲染逻辑里读currentCampaign.reviews[0].text、campaign.startDate.seconds这类嵌套字段，目标字段完全不存在，就会抛出属性读取错误。
• 嵌套读取无兜底校验
  就算数据正常返回了，如果文档里没有存储startDate、images、reviews这类嵌套结构，直接读下一层的seconds、url、text依然会报同样的错，原代码完全没有做字段存在性判断。
• 集合拉取的副作用逻辑错误
  第一个useEffect里的临时数组tempDoc定义在组件函数体作用域里，每次组件重渲染都会被重置为空数组，而且在forEach循环里反复调用setCampaigns，会触发多次不必要的重渲染，甚至可能导致状态值被异常覆盖。

1. 对齐状态的初始化结构 #

根据状态存储的内容类型匹配初始值，不要混用数组和对象结构：

// 存储单个活动文档的状态，初始值为空对象
const [currentCampaign, setCurrentCampaign] = useState({})
// 存储全量活动列表的状态，初始值为空数组
const [campaigns, setCampaigns] = useState([])

2. 修正集合拉取的副作用逻辑 #

把临时变量移到useEffect作用域内部，等全量数据遍历完成后一次性更新状态：

useEffect(() => {
  const tempDoc = []
  db.collection("campaigns").get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        tempDoc.push({ id: doc.id, ...doc.data() })
      })
      // 遍历完成后再一次性更新状态，避免循环内频繁setState
      setCampaigns(tempDoc)
    })
    .catch((error) => {
      console.log("Error getting documents: ", error);
    });
}, []);

3. 嵌套字段访问加可选链兜底 #

所有多层属性读取的位置，用可选链?.做存在性判断，避免中间值为undefined时报错：
原错误写法：

console.log(campaign[0].startDate.seconds)
console.log(campaign.images[0].url)

修正后写法：

// 单文档对象的嵌套访问
console.log(currentCampaign?.startDate?.seconds)
console.log(currentCampaign?.images?.[0]?.url)
// 活动列表第一项的嵌套访问
console.log(campaigns?.[0]?.startDate?.seconds)

渲染逻辑同理，原写法在数据未加载完成时必然报错：

// 原错误代码
<Typography>
  {currentCampaign.reviews[0].text}
</Typography>

修正后带兜底的写法：

<Typography>
  {currentCampaign?.reviews?.[0]?.text ?? "内容加载中..."}
</Typography>

如果需要等数据完全加载完成再渲染内容，也可以加提前返回的条件判断：

// 目标字段不存在时先渲染加载态，避免读属性报错
if (!currentCampaign?.reviews?.[0]?.text) {
  return <Typography>内容加载中...</Typography>
}

return(
  <Typography>
    {currentCampaign.reviews[0].text}
  </Typography>
)

4. 修正错误的状态判断逻辑 #

原代码里写的if(currentCampaign[0])判断完全失效，因为currentCampaign存的是对象，不存在0这个索引，这个判断永远为false。需要改成判断实际存在的文档字段：

// 正确的存在性判断写法
if (currentCampaign?.startDate) {
  console.log("已拿到活动时间字段", currentCampaign.startDate.seconds)
}

• Firestore返回的Timestamp类型字段（比如存储的日期字段）本身就带seconds、nanoseconds属性，只要字段真实存在，不需要额外做格式转换就能正常读取。
• 不要对单文档ref拉取的普通对象加数组下标访问，这是触发这类报错的最常见写法。

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