1

我正在尝试使用“react-google-login”进行社交登录。

.env 根目录

NEXT_PUBLIC_GOOGLE_CLIENT_ID=askfjaskf

准备好了.tsx

import { GoogleLogin } from "react-google-login";
<GoogleLogin
    clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}
    render={(props) => (
      <div onClick={props.onClick}>
        <div>구글 로그인&lt;/div>
      </div>
    )}
    onSuccess={(res) => {
      const { profileObj } = res as any;
      setStep(AuthStep.AGREE);
    }}
    onFailure={(res) => {
      console.log("Google Error", res);
    }}
  />

在clientId中，它说

没有重载匹配此调用。Overload 1 of 2, '(props: GoogleLoginProps | Readonly): GoogleLogin'，给出了以下错误。键入'字符串 | undefined' 不可分配给类型 'string'。类型“未定义”不可分配给类型“字符串”。Overload 2 of 2, '(props: GoogleLoginProps, context: any): GoogleLogin'，给出了以下错误。键入'字符串 | undefined' 不可分配给类型 'string'。类型“未定义”不可分配给类型“字符串”.ts(2769) index.d.ts(80, 12)：预期类型来自属性“clientId”，该属性在此处声明类型为“IntrinsicAttributes & IntrinsicClassAttributes & Readonly &只读<...>'

我不知道为什么它说它可以是未定义的。它适用于本地，但不适用于生产部署。任何人都可以帮忙吗？

4

1 回答 1

2

我有同样的问题，但使用不同的 ENV 变量，问题是打字稿不知道 ENV 变量是否存在。

检查另一个问题： 在 TypeScript 中使用 process.env

它帮助我解决了这个问题。只需要创建environment.d.ts并将全局 ENV 变量声明为您希望它们成为的类型

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_GOOGLE_CLIENT_ID: string; // this is the line you want
      NODE_ENV: 'development' | 'production';
      PORT?: string;
      PWD: string;
    }
  }
}
于 2021-11-10T04:03:47.387 回答