React Native渲染Firestore文档时map仅显示首项数据问题

你的代码存在两个核心问题，导致列表最终只渲染第一条数据：

• 把setTickets状态更新写在了forEach遍历循环内，每推入1条文档就触发1次重渲染，连续高频的状态更新会触发React的更新合并、中断机制
• 循环内每次传给setTickets的是同一个局部数组引用，React做状态浅比较时，无法稳定识别数组内容的后续变更，最终大概率只保留第一次更新时的单条数据状态

刷新时短暂看到其余条目，是最后几次循环的更新短暂触发了渲染，但很快被异常的更新逻辑覆盖。

1. 把setTickets调用移到遍历逻辑外部，等所有文档数据全部组装完成后，只触发一次状态更新
2. 把Firestore实例、集合引用的初始化移到组件外部，避免每次组件重渲染都重复创建实例
3. 用数组map方法替代forEach+push的写法，逻辑更简洁，同时保证传入状态的是全新数组引用

修复后的完整代码如下：

import { View, Text } from 'react-native';
import { useState, useEffect } from 'react';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

// 全局常量移到组件外，仅初始化一次
const db = getFirestore();
const colRef = collection(db, "Tickets");

export default function TicketList() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const snapshot = await getDocs(colRef);
      // 遍历完成后一次性组装全量数据
      const ticketList = snapshot.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));
      // 仅触发一次状态更新
      setTickets(ticketList);
    };

    fetchTickets();
  }, []);

  return (
    <View style={GlobalStyles.container}>
      <Text>Previous tickets</Text>
      {tickets.map((ticket) => (
        <Text key={ticket.id}>{ticket.form?.TicketNumber}</Text>
      ))}
    </View>
  );
}

• 取值时加了可选链运算符?.，如果存在个别文档缺失form字段，不会因为JS报错导致整个列表渲染崩溃
• 把数据请求函数移到useEffect内部，避免组件每次渲染都重复声明函数，减少不必要的性能开销
• 用async/await替代.then链式调用，代码可读性更高

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