React中@fullcalendar/react无法渲染Firestore返回日历事件的问题

核心错误点 #

• state初始值类型错误：eventsData初始值设为空对象{}，但FullCalendar的events属性要求接收数组类型，初始渲染时类型不匹配会导致事件解析逻辑异常。
• 事件字段不匹配：从Firestore直接取出的事件数据使用start_date、end_date作为时间字段名，FullCalendar默认仅识别start、end作为事件的起止时间字段，字段名不匹配时组件无法读取事件时间，自然不会渲染事件。
• 时间格式可能不兼容：如果Firestore中存储的是Timestamp类型数据、或者非标准格式的时间字符串，没有做格式转换的话组件也无法解析。

修复方案 #

1. 修正state初始类型，将空对象改为空数组：

// 错误写法
// const [eventsData, setEventsData] = useState({})
// 修正后
const [eventsData, setEventsData] = useState([])

2. 拉取Firestore数据时做字段映射，转换成FullCalendar兼容的事件格式，不要直接传入原始文档数据：

const getEventsData = async () => { 
  try {
    const snapshot = await firebase.firestore().collection("Events").get()
    const events = snapshot.docs.map(eventDoc => {
      const data = eventDoc.data()
      return {
        id: eventDoc.id, // 建议绑定文档ID，后续编辑/删除事件时需要
        title: data.title, // 替换为你Firestore中存储事件标题的实际字段名
        start: data.start_date, // 如果是Firestore Timestamp类型，改为data.start_date.toDate()
        end: data.end_date, // 如果是Firestore Timestamp类型，改为data.end_date.toDate()
        // 可按需扩展color、allDay、description等其他事件属性
      }
    })
    setEventsData(events)
  } catch (e) {
    console.error("事件拉取失败：", e)
  }
}

3. 校验排查

可先传入硬编码的测试事件验证组件本身是否正常，例如给events传入[{title: "测试事件", start: "2024-05-20"}]，如果测试事件能正常显示，说明组件本身无问题，故障点就是传入的事件数据格式/字段不符合要求。
如果映射字段后仍不显示，打印处理后的事件数组，确认每个事件的start值为合法的ISO时间字符串或JS Date对象，Firestore存储的Timestamp类型必须调用toDate()转换后再传入。

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