在React中使用@react-google-maps/api的MarkerClusterer遇类型错误

错误原因 #

你遇到的ts(2769)错误是因为MarkerClusterer的子回调函数要求返回单个React元素，但你直接返回了markers.map()生成的元素数组，TypeScript严格校验类型，数组不满足单个ReactElement的类型定义，因此抛出类型不匹配的错误。

解决方案 #

将markers.map()生成的所有Marker组件用React.Fragment（或简写<>）包裹，让回调函数返回单个元素，满足类型要求。

另外注意：你在循环中给所有Marker绑定了同一个markerRef，这会导致只有最后一个Marker能被正确引用，建议改用ref数组来存储每个Marker的引用。

修改后的核心代码 #

首先调整ref的定义：

const markerRef = useRef<(Marker | null)[]>([]);

然后修改MarkerClusterer部分：

<MarkerClusterer>
  {clusterer => (
    <>
      {markers?.map((obj: any, i) => (
        <Marker
          onClick={handleMarkerHover}
          ref={(el) => (markerRef.current[i] = el)}
          key={obj.id} {/* 优先用唯一id作为key，避免索引导致的渲染问题 */}
          position={obj.latLng}
          label={{
            text: obj.avatar
              ? obj.name
              : obj.name
                  .split(' ')
                  .map((name: string) => name[0])
                  .join('')
                  .toUpperCase(),
            className: obj.avatar ? `marker-label-with-avatar` : 'marker-label-without-avatar',
          }}
          icon={{
            scaledSize: new google.maps.Size(50, 50),
            url: obj.avatar ? obj.avatar + '#custom_marker' : 'avatar_default.png' + '#custom_marker_w/o_avatar',
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(25, 50),
          }}
          animation={google.maps.Animation.DROP}
        />
      ))}
    </>
  )}
</MarkerClusterer>

内容的提问来源于stack exchange，提问作者Kerem İlhan