如何让 NextJS 与 fetch 和 headers 一起正常工作？

Question

我有一个 NextJS 应用程序，正在使用 官方教程。 它们展示了如何从 API 中获取数据以及 API-Key 作为授权标头。但是 TypeScript 无法编译代码，因为：

TS2769：没有与此调用匹配的重载。

如何解决这个问题？

这是代码：

export async function getPosts(lang: string) {
    const res = await fetch(url + lang, {
        headers: {
            authorization: process.env.API_KEY,
        },
    })

    return res.json()
}

Answer 1

process.env.API_KEY

属于

string | undefined

类型。它是未定义的，因为您可能忘记将其添加到

.env

文件中。

headers

属性期望

Record<string, string>

。 或

[string, string][] | Headers

您需要告诉 TypeScript 该环境变量不是由以下之一未定义的：

1. 非空断言：

   process.env.API_KEY!

2. 之前检查：

export async function getPosts(lang: string) {
   const API_KEY = process.env.API_KEY;

   if (!API_KEY) {
       throw new Error("You forgot to add API_KEY to .env file")
   }


    const res = await fetch(url + lang, {
        headers: {
            authorization: API_KEY,
        },
    })

    return res.json()
}