在 NextJS 的 NextApiResponse 中出现错误 Argument of type is not 'X' is not assignable to parameter of type 'X'

Question

我有以下代码

type Data = {
  id: string;
  name: string;
  description: string;
  price: number;
};

const FetchMeals = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
  const response = await fetch(
    "https://url.com/Meals.json"
  );

  if (!response.ok) {
    throw new Error("Something went wrong");
  }

  const responseData = await response.json();

  const loadedMeals:Data[] = [];

  for (const key in responseData) {
    loadedMeals.push({
      id: key,
      name: responseData[key].name,
      description: responseData[key].description,
      price: responseData[key].price,
    });
  }

  res.status(200).json({ loadedMeals });
  
};

export default FetchMeals;

我把响应的主体类型定义为上面的类型，并且在NextApiResponse旁边用< >括号定义了类型。正文的类型应该是一个数据数组。我这里有两个问题。如果我用 Data 类型定义我的数组，例如下面代码中的 const loadedMeals:Data[] = [];

for (const key in responseData) {
    loadedMeals.push({
        id: key,
        name: responseData[key].name,
        description: responseData[key].description,
        price: responseData[key].price,
    });
}

我收到错误消息“字符串类型不可分配给数字类型”。

问题1)for循环中id的类型怎么变成string了？

在 res.status(200).json({ loadedMeals }); 的 loadedMeals 中显示此错误

Argument of type '{ loadedMeals: Data[]; }' is not assignable to parameter of type 'Data'. Object literal may only specify known properties, and 'loadedMeals' does not exist in type 'Data'.

问题2)为什么会显示这个错误？

当我执行邮递员 GET 请求时，它返回具有值的正确数组，但 IDE 显示此错误。它只是与 IDE 有关，还是我的 TypeScript 代码错误，我应该在我的代码中添加一些东西。这是 Next.js API 路由，我使用的 IDE 是 VSCode.

我确实查找了答案，但无法理解我在这里做错了什么。

Answer 1

传递给 NextApiResponse 的通用类型将决定 res.json() 返回的数据类型。

在您的例子中，您将在响应中返回 { loadedMeals }，其中 loadedMeals 是 Data 个对象的数组。这意味着返回的对象类型对应于 { loadedMeals: Data[] }.

您应该相应地键入传递给 NextApiResponse 的通用类型以匹配该响应。

const FetchMeals = async (req: NextApiRequest, res: NextApiResponse<{ loadedMeals: Data[] }>) => {
    // existing code
    
    res.status(200).json({ loadedMeals }); // The type of `{ loadedMeals }` is `{ loadedMeals: Data[] }`
}

在 NextJS 的 NextApiResponse 中出现错误 Argument of type is not 'X' is not assignable to parameter of type 'X'

Getting error Argument of type is not 'X' is not assignable to parameter of type 'X' in the NextApiResponse in NextJS

typescript

next.js