如何修复绑定元素隐式拥有'any'类型的TypeScript错误？

这个错误（Binding element 'id' implicitly has an 'any' type.ts(7031)）本质是TypeScript无法推断出你解构的id的具体类型——因为你从fetch返回的res.json()拿到的posts是一个any[]类型，所以在map里解构{ id }时，TypeScript不知道id是什么类型，就默认给了它any，而你的TypeScript配置应该是开启了noImplicitAny规则，所以触发了报错。

下面给你两种最常用的修复方案，你可以根据习惯选择：

方案1：定义通用Post接口并给posts断言类型 #

你已经在代码里定义了页面props的post结构，可以复用这个结构定义一个通用的Post接口，然后在解析JSON时给posts指定类型，这样整个代码里的post相关类型都能保持一致：

import React from "react";
import axios from "axios";
import { GetStaticProps } from "next";

// 定义通用的Post接口，全项目复用这个类型
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

export default function SSGPage({ post }: { post: Post }) {
  console.log(post);
  return <main>{post.title}</main>;
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  if (!params?.id) {
    return {
      props: {},
      notFound: true,
    };
  }
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  // 给单个post也断言类型，确保类型一致
  const post = await res.json() as Post;
  return {
    props: { post },
  };
};

export async function getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  // 给posts断言为Post数组类型
  const posts = await res.json() as Post[];
  // 现在TypeScript明确知道id是number类型，不会再报错
  const paths = posts.map(({ id }) => ({ params: { id: `${id}` } }));
  return { paths, fallback: false };
}

方案2：给map的回调参数显式指定类型 #

如果不想单独定义接口，也可以直接在map的回调里给解构的参数指定类型，快速解决当前报错：

export async function getStaticPaths() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();
  // 直接给解构的参数指定id的类型
  const paths = posts.map(({ id }: { id: number }) => ({ params: { id: `${id}` } }));
  return { paths, fallback: false };
}

为什么更推荐方案1？ #

方案1通过定义通用的Post接口，能让整个代码里的post相关逻辑都获得类型提示和校验，不仅解决了当前的错误，还能避免后续修改时出现类型不匹配的问题，让代码更健壮、可维护。

内容的提问来源于stack exchange，提问作者Anastasiya Mykolenko