如何在TypeScript版NextJS代码中访问Express API并修复map调用报错

错误原因 #

1. 组件props接收逻辑错误：NextJS页面组件接收的所有getStaticProps返回的props都会被封装为一个顶层对象，你当前直接把入参命名为projects，实际拿到的是完整的props对象{ projects: 你的数组数据 }，而非你预期的项目数组本身，所以不存在map方法。
2. 类型定义不匹配：API返回的是项目对象组成的数组，你当前给projects标注的是单个项目对象的类型，和实际数据结构不符。
3. 渲染语法错误：注释掉的map代码中没有用{}读取变量值，也没有给循环项加唯一key属性，即使数组正常也无法正确渲染内容。

修复后的完整代码 #

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:3100/");
  const data = await res.json();

  return {
    props: { projects: data },
  };
};

// 单个项目的类型定义
interface InterfaceProject {
  project: string;
}

// 组件入参解构出projects，标注为数组类型
const Landing = ({ projects }: { projects: InterfaceProject[] }) => {
  return (
    <>
      <h1>Hello World</h1>
      {projects.map((projectItem, index) => (
        <h3 key={index}>{projectItem.project}</h3>
      ))}
    </>
  );
};

export default Landing;

额外注意事项 #

运行代码前请确认express服务已经在本地3100端口正常启动，否则getStaticProps无法拉取到正确数据。

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