React中如何等待数据库加载完成以访问useState数组首个元素？

你遇到的问题核心是组件首次渲染时数据还未加载完成：初始状态下trainer是空数组[]，直接访问trainer[0].id相当于访问undefined.id，自然会抛出错误。而map方法在空数组上执行时不会产生任何渲染，所以没有报错。

下面提供几种实用的解决办法：

1. 条件渲染（最常用） #

通过判断数组长度，确保有数据后再渲染Info组件：

return (
  <div className="cms-stats">
    <TrainerSelection>
      {trainer.map(t => <Trainer id={t.id} key={t.id}>{t.name}</Trainer>)}
    </TrainerSelection>
    {/* 只有数组有数据时才渲染Info */}
    {trainer.length > 0 && (
      <Info 
        id={trainer[0].id} 
        name={trainer[0].name} 
        status={trainer[0].status} 
        image={trainer[0].image} 
        key={trainer[0].id}
      />
    )}
  </div>
)

2. 添加加载状态（优化用户体验） #

如果数据加载时间较长，可以增加加载状态提示，避免页面空白或异常：

export default function TrainerInfo() {
    const [trainer, setTrainer] = useState([]);
    const [isLoading, setIsLoading] = useState(true); // 新增加载状态

    useEffect(() => {
        const trainerCollectionRef = collection(database, "trainer");
        const getTrainer = async () => {
            const data = await getDocs(trainerCollectionRef);
            setTrainer(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
            setIsLoading(false); // 数据加载完成后更新状态
        };
        getTrainer();
    }, []);

    // 加载中时显示提示
    if (isLoading) {
        return <div>加载中...</div>;
    }

    return (
        <div className="cms-stats">
            <TrainerSelection>
                {trainer.map(t => <Trainer id={t.id} key={t.id}>{t.name}</Trainer>)}
            </TrainerSelection>
            {trainer.length > 0 && (
              <Info 
                id={trainer[0].id} 
                name={trainer[0].name} 
                status={trainer[0].status} 
                image={trainer[0].image} 
                key={trainer[0].id}
              />
            )}
        </div>
    )
}

3. 可选链操作符（快速规避报错） #

如果你的项目支持ES2020及以上语法，可以用可选链?.直接避免访问undefined属性的错误：

<Info 
  id={trainer[0]?.id} 
  name={trainer[0]?.name} 
  status={trainer[0]?.status} 
  image={trainer[0]?.image} 
  key={trainer[0]?.id}
/>

注意：这种方式只是避免报错，若Info组件要求props为必填项，可能会引发组件内部的问题，建议结合条件渲染使用。

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