React+TypeScript中FullCalendar的TS2769调用匹配错误求助

错误原因 #

你的events属性使用的函数返回了Promise<void | EventInput[]>，但FullCalendar的EventSourceFunc类型要求返回值必须是void | PromiseLike<EventInput[]>。问题核心在于：

• successCallback(body.data)和failureCallback(reason)都返回void，导致整个Promise的最终resolve值为void，与要求的EventInput[]类型不匹配。

修复方案 #

方案1：使用回调模式（不返回Promise） #

FullCalendar原生支持通过回调函数传递事件数据，无需返回Promise，这是最直接的修复方式：

import React from 'react'
import AppLayout from '@/Layouts/AppLayout'
import '@fullcalendar/react/dist/vdom'
import FullCalendar from '@fullcalendar/react'
import { EventInput } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import useRoute from '@/Hooks/useRoute'

export default function Calendar() {
  const route = useRoute()

  return (
    <AppLayout>
            <FullCalendar
              plugins={[dayGridPlugin]}
              initialView="dayGridMonth"
              events={(info, successCallback, failureCallback) => {
                interface Body {
                  data: EventInput[]
                }

                // 去掉return，直接执行fetch逻辑
                fetch(
                  route('events', {start: info.startStr, end: info.endStr})
                )
                  .then((response: any) => response.json() as Promise<Body>)
                  .then(body => successCallback(body.data))
                  .catch((reason: any) => failureCallback(reason))
              }}
            />
    </AppLayout>
  )
}

方案2：返回Promise（确保resolve值为EventInput[]） #

如果需要保持Promise风格，可使用async/await简化代码，确保Promise最终resolve的是EventInput[]，错误直接抛出（FullCalendar会自动处理Promise的reject）：

import React from 'react'
import AppLayout from '@/Layouts/AppLayout'
import '@fullcalendar/react/dist/vdom'
import FullCalendar from '@fullcalendar/react'
import { EventInput } from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import useRoute from '@/Hooks/useRoute'

export default function Calendar() {
  const route = useRoute()

  return (
    <AppLayout>
            <FullCalendar
              plugins={[dayGridPlugin]}
              initialView="dayGridMonth"
              events={async (info) => {
                interface Body {
                  data: EventInput[]
                }

                const response = await fetch(
                  route('events', {start: info.startStr, end: info.endStr})
                )
                const body = await response.json() as Body
                return body.data
              }}
            />
    </AppLayout>
  )
}

内容的提问来源于stack exchange，提问作者Clément Baconnier