Google Places API 3.53版本后报错：MutationObserver参数非Node类型

数据老陈

2026-7-2

解决方案

1. 确认DOM容器已正确挂载

首先确保组件JSX中存在绑定containerRef的DOM元素，且该元素在useEffect执行时已完成挂载：

// 组件JSX部分添加容器元素，可隐藏不显示
<div ref={containerRef} style={{ display: 'none' }}></div>

同时在useEffect中先校验容器是否存在，避免传入null触发错误：

const containerRef = React.useRef();
React.useEffect(() => {
    if (!containerRef.current) return;
    try {
        const autocompleteService = new google.maps.places.AutocompleteService();
        const placesService = new google.maps.places.PlacesService(containerRef.current);
        // 编写PlacesService的业务逻辑
    } catch (err) {
        console.error('PlacesService初始化失败:', err);
    }
}, []);

2. 移除冗余的Map实例创建

之前通过new google.maps.Map()初始化PlacesService是完全冗余的——PlacesService构造函数直接支持传入HTMLDivElement，不需要依赖Map实例。新版本Google Maps API对Map实例的初始化参数要求更严格，传入未挂载的DOM节点会触发MutationObserver相关错误，直接传入容器DOM即可规避问题。

3. 临时容器方案（无需显示容器）

若组件不需要任何地图相关显示元素，可直接创建离线DOM节点初始化PlacesService，无需在JSX中添加容器：

React.useEffect(() => {
    try {
        const autocompleteService = new google.maps.places.AutocompleteService();
        const tempContainer = document.createElement('div');
        const placesService = new google.maps.places.PlacesService(tempContainer);
        // 编写业务逻辑
    } catch (err) {
        console.error('PlacesService初始化失败:', err);
    }
}, []);