React+TypeScript中@vis.gl/react-google-maps刷新后Google Places API报错

核心问题分析 #

你手动调用initGooglePlaces的时机与@vis.gl/react-google-maps的APIProvider脚本加载逻辑冲突：首次加载时脚本缓存命中，顺序正常；但刷新后缓存失效，手动初始化代码先执行，Places库尚未完全加载就绪，导致后续调用出现Cannot read properties of undefined (reading 'lH')错误。

解决方案步骤 #

1. 移除手动初始化，改用APIProvider管理Places库加载 #

删除initGooglePlaces(process.env.REACT_APP_GOOGLE_API_KEY || "");这一行，通过APIProvider的libraries参数指定加载places库，确保脚本加载顺序由官方库统一管理：

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <GoogleAuthProviderWrapper>
        <APIProvider 
          apiKey={process.env.REACT_APP_GOOGLE_API_KEY || ""}
          libraries={['places']} // 新增：指定加载Places库
        >
          <App />
        </APIProvider>
      </GoogleAuthProviderWrapper>
    </QueryClientProvider>
  </React.StrictMode>
);

2. 确保Autocomplete组件在API就绪后渲染 #

在你的Autocomplete组件中，使用@vis.gl/react-google-maps提供的useJsApiLoader钩子，判断API加载状态后再渲染组件逻辑：

import { useJsApiLoader } from '@vis.gl/react-google-maps';

const AutocompletePlaces = () => {
  const { isLoaded } = useJsApiLoader({
    apiKey: process.env.REACT_APP_GOOGLE_API_KEY || "",
    libraries: ['places']
  });

  if (!isLoaded) {
    return <div>加载中...</div>; // 显示加载状态，避免提前渲染
  }

  // 渲染Autocomplete逻辑
  return (
    <input type="text" id="autocomplete" />
  );
};

3. 处理React Strict Mode的重复渲染影响（可选） #

如果上述步骤仍未解决问题，可暂时关闭React Strict Mode测试：

root.render(
    <QueryClientProvider client={queryClient}>
      <GoogleAuthProviderWrapper>
        <APIProvider 
          apiKey={process.env.REACT_APP_GOOGLE_API_KEY || ""}
          libraries={['places']}
        >
          <App />
        </APIProvider>
      </GoogleAuthProviderWrapper>
    </QueryClientProvider>
);

Strict Mode会触发两次渲染，可能导致Google Maps API重复初始化，确认问题后再调整组件逻辑适配Strict Mode。

4. 清理Autocomplete实例残留 #

在Autocomplete组件中添加清理逻辑，避免刷新时全局对象冲突：

useEffect(() => {
  let autocomplete: google.maps.places.Autocomplete | null = null;
  if (isLoaded) {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById('autocomplete') as HTMLInputElement
    );
  }

  return () => {
    if (autocomplete) {
      autocomplete.unbindAll(); // 清理事件监听
      autocomplete = null;
    }
  };
}, [isLoaded]);

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