React.js从Firebase实时数据库获取数据时遇Participants访问错误

错误原因 #

你遇到的Cannot read properties of undefined (reading '0')错误，主要由以下几个问题导致：

• 字段拼写错误：数据库中的字段是Participants，但代码里写成了Particpants（少了一个i），导致无法正确访问参与者数据。
• 初始状态不匹配：event的初始值设为数组[]，但从Firebase获取的是单个事件对象，初始状态下event.Participants会是undefined。
• 异步加载未做保护：Firebase数据是异步获取的，组件首次渲染时event还是初始值，直接访问event.Participants[0].Name会触发报错。
• 语法错误：useEffect中onValue的回调函数未正确闭合，可能导致数据无法正常更新。

修正步骤 #

1. 修正字段拼写 #

把代码中所有的Particpants改为Participants，和数据库字段名保持一致：

<h2>Name: {event.Participants?.[0].Name}</h2>

2. 调整初始状态 #

将event的初始值从数组改为空对象，匹配Firebase返回的数据结构：

const [event, setEvent] = useState({});

3. 添加空值保护 #

使用可选链操作符?.避免数据未加载时的报错，或者结合条件渲染：

// 方式1：可选链操作符
<h2>Name: {event.Participants?.[0]?.Name}</h2>

// 方式2：条件渲染
{event.Participants && event.Participants.length > 0 && (
  <h2>Name: {event.Participants[0].Name}</h2>
)}

4. 修复useEffect语法错误 #

确保onValue的回调函数和useEffect正确闭合，并添加正确的依赖项：

useEffect(() => {
  // 替换为实际的数据库路径，比如`events/${eventID}`
  const dbRef = ref(db, `events/${eventID}`);

  onValue(dbRef, (snapshot) => {
    const data = snapshot.val();
    console.log(data);
    setEvent(data || {}); // 处理数据为空的情况
  });

}, [eventID]); // 依赖项添加eventID，确保路径变化时重新获取数据

5. 验证数据库路径 #

确认dbRef的路径是否正确指向目标事件节点，比如数据结构是events/{eventID}，路径就应该写成events/${eventID}。

完整修正后的示例代码 #

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { ref, onValue } from "firebase/database";

import { db } from "../utils/firebase";

const ClientDetailLive = () => {
  const { userID, eventID, participantID } = useParams(); // 合并解构useParams

  const [event, setEvent] = useState({});
  const [participant, setParticipants] = useState("");

  useEffect(() => {
    const dbRef = ref(db, `events/${eventID}`);

    onValue(dbRef, (snapshot) => {
      const data = snapshot.val();
      console.log(data);
      setEvent(data || {});
    });

  }, [eventID]);

  return (
    <>
      Client stuff: {JSON.stringify({ userID, eventID, participantID })}
      <br />
      UserID: {userID}
      <br />
      Event: {eventID}
      <br />
      Participant: {participantID}
      
      <div key={event.id}>
        <h2>Event Name: {event.Title}</h2>
        <h2>Datum: {event.Time ? new Date(event.Time).toLocaleString() : ""}</h2>
      </div>
      
      <h1>Ihre Daten</h1>
      
      {event.Participants && event.Participants.length > 0 ? (
        <h2>Name: {event.Participants[0].Name}</h2>
      ) : (
        <p>加载中...</p>
      )}
    </>
  );
};

export default ClientDetailLive;

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