Nextjs13 地图不显示错误：“‘GoogleMap’无法用作 JSX 组件”

Question

所以我正在尝试集成谷歌地图，并且我正在关注一篇博客文章，其中包含有关 next13 typescript 的说明。我一直认为应该显示地图，但什么也不显示。控制台上也没有错误。打字稿显示错误

'GoogleMap' cannot be used as a JSX component. Its instance type 'GoogleMap' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("c:/Users/Kelvin/Desktop/project tmp/ger-command-dashboard/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786) index.d.ts(175, 9): 'children' is declared here.

。请帮我解决这个问题

这是nextjs根页面

'use client';

import { useLoadScript } from '@react-google-maps/api';
import React from 'react';
import Ground from '@/app/components/Maps/Ground';

export default function Page() {
  const libraries = React.useMemo(() => ['places', 'routes', 'geocoding'], []);

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_GOOGLE_MAPS_INTEGRATION_API_KEY as string,
    libraries: libraries as any,
  });
  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return <Ground />;
}

这是渲染地图组件的主页

import React from 'react';
import {
  GoogleMap,
  Marker,
  DirectionsRenderer,
  Circle,
  MarkerClusterer,
} from '@react-google-maps/api';
import { useMantineColorScheme } from '@mantine/core';
import { useLocation } from '@/app/dashboard-home/useLocation';
import { ICoordinates } from '@/interfaces/map';

type LatLngLiteral = google.maps.LatLngLiteral;
type DirectionsResult = google.maps.DirectionsResult;
type MapOptions = google.maps.MapOptions;

export default function Ground() {
  const [baseLocation, setBaseLocation] = React.useState<ICoordinates>();

  const { getUserLocation, errorMsg, loading } = useLocation();
  const { colorScheme } = useMantineColorScheme();

  React.useEffect(() => {
    async function fetchLocationInformation() {
      try {
        const userLocation = await getUserLocation();
        if (userLocation) {
          setBaseLocation(userLocation);
        }
      } catch (error) {
        console.log(errorMsg);
      }
    }
    fetchLocationInformation();
  }, []);

  const mapRef = React.useRef<GoogleMap>();
  const center = React.useMemo<LatLngLiteral | undefined>(
    () => (baseLocation ? { lat: baseLocation.latitude, lng: baseLocation.longitude } : undefined),
    [baseLocation]
  );

  const options = React.useMemo<MapOptions>(
    () => ({
      clickableIcons: true,
      scrollwheel: true,
      mapId: colorScheme === 'dark' ? 'faaa827d36c66866' : '8660e06b8e3da749',
    }),
    [colorScheme]
  );
  const onLoad = React.useCallback((map: any) => {
    mapRef.current = map;
  }, []);

  if (errorMsg) {
    return <div>{errorMsg}</div>;
  }
  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <GoogleMap
        zoom={8}
        center={center}
        options={options}
        onLoad={onLoad}
        mapContainerStyle={{
          width: '100%',
          height: '100%',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
      </GoogleMap>
    </>
  );
}

我希望我能指出我需要帮助的区域。如果您需要更多代码，请告诉我。我不认为

useLocation()

钩子很重要，所以发生的事情是它获取设备位置坐标。预先感谢

Answer 1

我不确定如何解决 TypeScript 错误，但我注意到你的环境变量存在问题。

尝试将

process.env.NEXT_GOOGLE_MAPS_INTEGRATION_API_KEY

替换为

process.env.NEXT_PUBLIC_GOOGLE_MAPS_INTEGRATION_API_KEY

，记得也要更改 .env 的变量。

在 NextJS 中，您的客户端组件只能读取前缀为

NEXT_PUBLIC_

的变量，其他变量将被视为私有且只能从后端访问。