reactjs - TS2531 | React useRef - 对象可能未定义

Question

我需要在 React 中为我的谷歌地图设置新的纬度和经度
Const mapRef 返回错误:对象可能为“null”。 TS2531
当我使用 let 而不是 React.useRef 时，它可以工作。
我认为应该将类型设置为mapRef，但我不知道是哪一个以及在哪里可以找到它。
但我认为 useRef 是更好的解决方案，不是吗？

Google map 库:https://www.npmjs.com/package/@react-google-maps/api

const libraries = ["places"];

const CustomMap = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "MY_API_KEY",
    libraries,
  });

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  };

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  const panTo = React.useCallback(({ lat, lng }) => {
    if (null !== mapRef.current) {
      // There is error 
      // mapRef.current Object is possibly 'null'.  TS2531
      mapRef.current.panTo({ lat, lng });
      mapRef.current.setZoom(18);
    }
  }, []);
  //console.log("maps show coord: ", props.coordinates);

  if (loadError) {
    return (
      <Fragment>
        <p>Error</p>
      </Fragment>
    );
  }
  if (!isLoaded) {
    return (
      <Fragment>
        <p>loading</p>
      </Fragment>
    );
  }
  return (
    <div>
      <Search panTo={panTo} />
      <GoogleMap
        id="map"
        mapContainerStyle={mapContainerStyle}
        zoom={15}
        center={center}
        //options={options}
        onLoad={onMapLoad}
      />
    </div>
  );
};

Answer 1

使用this package查找类型，然后设置 useRef 的类型并使用 null 对其进行初始化。

const mapRef: Type = React.useRef(null); // Replace `Type` with the actual type from the package

在您的情况下，类型似乎是 google.maps.Map 所以

const mapRef: google.maps.Map = React.useRef(null);

应该可以解决问题。