为什么Firebase在组件中返回undefined，但控制台能看到数据库读取的对象？

问题根源 #

onValue是异步回调，调用readBlogData时会立刻返回newArrObj，但此时Firebase的回调还未触发，newArrObj仍为undefined。偶尔热重载后能显示数据是因为之前的订阅已完成，变量被临时保留，这是不可靠的偶然情况。

正确实现方式 #

在自定义Hook中用React状态管理异步数据，通过useEffect处理Firebase的订阅与清理，确保数据更新能触发组件重新渲染：

修改后的自定义Hook

import { useState, useEffect } from 'react';
import { getDatabase, ref, onValue, Unsubscribe } from 'firebase/database';
// 确保app已正确初始化Firebase

function useFirebaseAuth() {
  // 保留原有逻辑：login、logout、loginStatus、writeBlogData等
  const [blogs, setBlogs] = useState<any[]>([]); // 建议替换any为你的博客类型

  useEffect(() => {
    const db = getDatabase(app);
    const dbRef = ref(db, "blogs");
    // 订阅数据变化，onValue返回取消订阅的函数
    const unsubscribe: Unsubscribe = onValue(dbRef, (snapshot) => {
      const rawData = snapshot.val();
      // 处理空数据场景
      const blogsArray = rawData ? Object.values(rawData) : [];
      setBlogs(blogsArray);
      console.log(blogsArray);
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return () => unsubscribe();
  }, []); // 空依赖数组，仅在组件挂载时订阅一次

  return { login, logout, loginStatus, writeBlogData, blogs };
}

修改后的组件代码

export default function BlogSection() {
  const { blogs } = useFirebaseAuth();
  console.log(blogs); // 数据加载完成后会输出数组

  return (
    <section className={styles.blogSection}>
      <Card className={styles.blogsContainer}>
        <h5>Blogs</h5>
        {/* 数据未加载时用假数据兜底 */}
        <Paginate blogs={blogs.length ? blogs : DUMMY_DATA} />
      </Card>
    </section>
  );
}

TypeScript优化建议 #

定义博客类型，避免使用any：

// 定义你的博客数据结构
interface Blog {
  id?: string;
  title: string;
  content: string;
  // 添加你需要的其他字段
}

// 替换useState的类型
const [blogs, setBlogs] = useState<Blog[]>([]);

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