Question

我收到此错误：

<块引用>

D:/Downloads/Uber-Website-Clone-master/src/App.tsx D:/Downloads/Uber-Website-Clone-master/src/App.tsx(17,7) 中的 TypeScript 错误：没有重载匹配这个调用。重载 1 of 2，'(props: Readonly): LoadScript'，出现以下错误。

D:/Downloads/Uber-Website-Clone-master/src/App.tsx
TypeScript error in D:/Downloads/Uber-Website-Clone-master/src/App.tsx(17,7):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<LoadScriptProps>): LoadScript', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.
  Overload 2 of 2, '(props: LoadScriptProps, context?: any): LoadScript', gave the following error.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.  TS2769

    15 |     <div className="App">
    16 |       <LoadScript 
  > 17 |       googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}
       |       ^
    18 |         libraries={['places']}
    19 |       >
    20 |         <CoordinatesProvider>

代码如下：

import React, { useEffect } from 'react';
import { LoadScript } from '@react-google-maps/api';

import './global.css';

import CoordinatesProvider from './context/coordinates';

import Header from './components/Header';
import Map from './components/Map';
import Search from './components/Search';

function App() {

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

export default App;

Answer 1

process.env.REACT_APP_GOOGLE_TOKEN 返回一个字符串（如果该值在环境中设置）或 undefined（如果未设置）。有了这些信息，我们来看看错误：

  > 17 |       googleMapsApiKey={process.env.REACT_APP_GOOGLE_TOKEN}

您正在尝试将 googleMapsApiKey 设置为 LoadScript 组件的道具。 LoadScript 肯定需要字符串类型才能起作用，并且它不接受任何其他类型。而我们的 process.env 可能返回一个未定义的值。

要解决这个问题，您需要确保 process.env.REACT_APP_GOOGLE_TOKEN 是一个字符串。您可以通过多种方式做到这一点：事先检查变量并通过抛出错误或显示错误消息或设置默认值来采取适当的措施。这是我的首选方式：

function App() {

  const key = process.env.REACT_APP_GOOGLE_TOKEN;
  if(!key){
    // you can throw error here and 
    // let [Error Boundary](https://reactjs.org/docs/error-boundaries.html)
    // handle it
    // or return an component that says "Google Token is not set"
    throw new Error('Google token is not set');
  }

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={key}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

Answer 2

将 env 变量包装在字符串文字中对我有用。

import React, { useEffect } from 'react';
import { LoadScript } from '@react-google-maps/api';

import './global.css';

import CoordinatesProvider from './context/coordinates';

import Header from './components/Header';
import Map from './components/Map';
import Search from './components/Search';

function App() {

  return (
    <div className="App">
      <LoadScript 
      googleMapsApiKey={`${process.env.REACT_APP_GOOGLE_TOKEN}`}
        libraries={['places']}
      >
        <CoordinatesProvider>
          <Header />
          <Search />
          <Map />
        </CoordinatesProvider>
      </LoadScript>
    </div>
  );

}

export default App;

没有重载匹配这个调用。in react

2 个答案: