Next.js中如何获取useEffect请求的数据并传递给子组件？

你的代码存在两个核心问题：

• 你把异步请求写在了useEffect的清理函数里（useEffect返回的函数是组件卸载时执行的清理逻辑），这导致数据根本不会在组件挂载时获取。
• scheduleList是useEffect内部的局部变量，组件的return部分完全访问不到它，必须用状态来管理数据。

修正后的代码：

import { useState, useEffect } from 'react';
import { getDocs, collection } from 'firebase/firestore';
import { db } from '../your-firebase-config'; // 替换成你的firebase配置路径

// 建议定义具体的类型，不要用模糊的object[]
interface ScheduleItem {
  id: string;
  // 这里补充你的日程数据字段，比如 className、time 等
}

export default function SchedulePage() {
  const [scheduleList, setScheduleList] = useState<ScheduleItem[]>([]);
  const [isLoading, setIsLoading] = useState(true); // 可选：添加加载状态

  useEffect(() => {
    // 定义异步函数并立即调用
    const fetchSchedule = async () => {
      try {
        const scheduleData = await getDocs(collection(db, "schedule"));
        const list = scheduleData.docs.map(schedule => ({
          id: schedule.id,
          ...schedule.data()
        })) as ScheduleItem[];
        setScheduleList(list);
      } catch (error) {
        console.error('获取日程失败:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchSchedule();
  }, []);

  if (isLoading) {
    return <div>加载中...</div>; // 可选：显示加载状态
  }

  return (
    <div>
      <Title>
        <h2>Class schedule</h2>
        <Button onClick={() => router.push("/add")}>Add Class Schedule</Button>
      </Title>
      <Timetable scheduleList={scheduleList}/>
    </div>
  );
}

关键修改说明：

• 用useState声明scheduleList状态变量，数据更新时组件会自动重新渲染，子组件就能拿到最新的props
• 在useEffect内部定义异步函数并立即执行，返回的函数应留作清理逻辑（比如取消未完成的请求）
• 用map替换forEach，更简洁地生成数据数组
• 添加具体的TypeScript类型定义，避免模糊的object[]类型
• 可选添加加载状态，优化用户等待体验

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