React中FullCalendar对接Google日历报googleCalendarApiKey错误

CalendarDataManager.ts:667 Unknown option 'googleCalendarApiKey' 这个报错本质是谷歌日历插件没有被FullCalendar正确识别注册导致的，和API密钥本身、日历ID的取值正确性无关，按以下步骤逐一排查即可解决：

• 依赖版本对齐检查
  所有@fullcalendar/开头的npm包必须使用完全相同的版本号，包括@fullcalendar/react、@fullcalendar/daygrid、@fullcalendar/interaction、@fullcalendar/google-calendar，跨大版本混装（比如核心包是v6、谷歌日历插件是v5）是插件注册失效的最高发原因。执行npm ls @fullcalendar可以查看所有相关依赖的实际安装版本，统一升级/降级到同一版本号即可。
• 插件导入正确性检查
  不同构建工具、不同FullCalendar大版本的插件导入写法有差异：
  • v5版本直接默认导入即可：import googleCalendarPlugin from "@fullcalendar/google-calendar"
  • v6版本在Vite、新版Create React App等ESM原生环境下，默认导入可能拿到undefined，需要改成显式取default导出：import { default as googleCalendarPlugin } from "@fullcalendar/google-calendar"。可以在组件代码里加一句console.log(googleCalendarPlugin)，如果打印值是undefined就说明导入写法错误，插件根本没被正确引入，自然不会注册对应的配置项。
• 配置写法修正
  你当前代码里有两个配置写法问题会触发报错：
  1. 变量命名容易造成混淆：你把API密钥存在了名为googleCalendarURL的变量里，虽然不影响运行，但要确保该变量在组件渲染作用域内确实能取到值，不要在组件外部打印验证取值，避免作用域问题造成变量实际为undefined。
  2. events配置嵌套错误：谷歌日历事件源不需要套数组包裹，直接传事件源配置对象即可，多余的数组嵌套会导致事件源解析逻辑异常，连带无法识别关联的googleCalendarApiKey配置。

import "./eventcalendar.css";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
// 如果打印插件为undefined，替换为下面注释的导入写法
import googleCalendarPlugin from "@fullcalendar/google-calendar";
// import { default as googleCalendarPlugin } from "@fullcalendar/google-calendar";

function EventCalendar() {
  const googleCalendarApiKey = process.env.REACT_APP_GOOGLE_API_KEY;
  const myGoogleCalendarID = "samplestring@gmail.com";

  // 调试阶段先打印确认两个核心值都存在
  console.log("谷歌日历插件实例：", googleCalendarPlugin);
  console.log("谷歌API密钥：", googleCalendarApiKey);

  const handleDateClick = (dateClickInfo) => {
    console.log(dateClickInfo.dateStr);
  };

  return (
    <div className="calendar-container">
      <FullCalendar
        plugins={[dayGridPlugin, interactionPlugin, googleCalendarPlugin]}
        initialView="dayGridMonth"
        dateClick={handleDateClick}
        googleCalendarApiKey={googleCalendarApiKey}
        events={{ googleCalendarId: myGoogleCalendarID }}
      />
    </div>
  );
}

export default EventCalendar;

补充说明：配置不报错后如果拉不到日历事件，去谷歌日历后台把对应日历的共享权限设置为「对所有知道链接的人公开可见」，同时确认谷歌云控制台已经启用了Google Calendar API，否则会返回403权限错误。

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