React对接Firebase Realtime DB返回值存在却报undefined错误原因是什么？

为什么match先返回空对象 #

• 你初始化useState({})时就给match设置了初始值为空对象，组件首次渲染时会优先使用这个初始值。
• 加载Firebase数据的逻辑写在useEffect中，useEffect的回调会在组件首次挂载完成、首次渲染结束之后才会执行。且Firebase Realtime Database的请求是异步操作，需要等待网络请求返回后才会调用setMatch更新状态，更新后才会触发二次渲染，此时match才会携带接口返回的有效数据。
• 开发环境下如果开启了React 18的严格模式（<StrictMode>），组件会被强制挂载、卸载、重新挂载一次，导致useEffect执行两次，也就会出现两次空对象的打印结果。

为什么最终有值仍抛出类型错误 #

React组件的渲染逻辑是同步执行的，首次渲染时你直接访问match.questions[0].question，此时match是初始空对象，match.questions的值为undefined，尝试访问undefined的[0]属性会直接抛出 TypeError，代码执行中断，根本等不到异步请求返回、状态更新的二次渲染阶段。

你可以任选以下一种方式修复：

1. 使用可选链操作符做安全访问
   直接修改JSX中的属性访问逻辑，遇到不存在的属性时会自动返回undefined，不会抛出错误，数据加载完成后会自动渲染正常内容：

return (
    <div className="App">
      <h1>{match?.questions?.[0]?.question}</h1>
      {/* 可选链加判断，只有题目存在时才渲染AnswerBox组件 */}
      {match?.questions?.[0] && <AnswerBox question={match.questions[0]} />}
    </div>
);

2. 增加加载状态判断
   新增loading状态管理加载过程，加载完成前展示加载提示，避免访问未初始化的数据：

const [match, setMatch] = useState({});
const [loading, setLoading] = useState(true);

const getMatch = () => {
    return onValue(
      ref(db, "/matches/ace34187-c7f2-41e7-a7f2-f097963cddc5"),
      (snapshot) => {
        setMatch(snapshot.val());
        setLoading(false);
      },
      { onlyOnce: true }
    );
};

// 渲染时先判断加载状态
if(loading) return <div>加载中...</div>

return (
    <div className="App">
      <h1>{match.questions[0].question}</h1>
      <AnswerBox question={match.questions[0]} />
    </div>
);

3. 设置更合理的初始值
   给match设置符合结构的初始值，避免属性访问报错：

// 初始值设置为空的questions数组，匹配返回数据结构
const [match, setMatch] = useState({ questions: [] });

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