useLoadScript传入不同libraries参数值时出现报错如何排查

这个报错是使用@react-google-maps/api库的useLoadScript钩子时的典型问题，核心触发逻辑有两点：

1. 数组引用不稳定：如果libraries数组定义在组件函数作用域内，每次组件重渲染都会生成全新的数组引用。useLoadScript内部会对传入配置做浅比较，一旦识别到libraries引用变更，就会判定配置更新，尝试重新加载谷歌地图JS API。但谷歌地图JS API本身不支持同一页面重复初始化，重复加载会直接抛出加载错误，常见报错为You have included the Google Maps JavaScript API multiple times on this page。
2. 配置不合法：示例代码中googleMapsApiKey传入了空值，且如果使用的API密钥没有开通drawing、places、geometry对应库的访问权限，也会直接返回加载错误。

根据使用场景选择对应方案即可：

• 固定使用的库列表无动态变更需求时，直接把libraries数组提到组件外部的模块作用域定义，保证整个应用生命周期内数组引用固定不变，不会因为组件重渲染触发重复加载：

// 组件外定义，作为模块常量
const libraries = ['drawing', 'places', 'geometry'];

export default function MapContainer() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: '替换为你自己的有效谷歌地图API密钥',
    libraries: libraries
  });

  // 后续地图渲染逻辑
}

• 如果需要根据组件状态动态调整要加载的库列表，用useMemo缓存libraries数组，仅当依赖的状态变化时才生成新的数组引用，避免无意义的引用变更触发重复加载：

import { useMemo, useState } from 'react';

export default function MapContainer() {
  const [enableDrawing, setEnableDrawing] = useState(false);
  // 缓存libraries引用
  const libraries = useMemo(() => {
    const baseLibraries = ['places', 'geometry'];
    return enableDrawing ? [...baseLibraries, 'drawing'] : baseLibraries;
  }, [enableDrawing]);

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: '替换为你自己的有效谷歌地图API密钥',
    libraries: libraries
  });

  // 后续地图渲染逻辑
}

注意：需要提前在谷歌云控制台为你的API密钥开通所加载库对应的API权限，否则依然会出现权限类加载错误。

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