没有重载匹配这个调用。在反应答案

【问题标题】：No overload matches this call.in react没有重载匹配这个调用。在反应
【发布时间】：2023-03-07 00:44:01
【问题描述】：

我收到此错误：

D:/Downloads/Uber-Website-Clone-master/src/App.tsx D:/Downloads/Uber-Website-Clone-master/src/App.tsx(17,7) 中的 TypeScript 错误：没有重载匹配此调用。 Overload 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;

【问题讨论】：

标签： reactjs typescript google-maps react-redux

【解决方案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>
  );

}

【讨论】：

【解决方案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;

【讨论】：