收到错误类型不是“X”的参数不能分配给 NextJS 中 NextApiResponse 中类型“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[] = [];下面代码中 id 的类型定义数组

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？

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

类型参数 '{loadedMeals: Data[]; }' 不可分配给“Data”类型的参数。对象文字只能指定已知属性，并且“Data”类型中不存在“loadedMeals”。

问题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[] }`
}