Next.js中导入含API获取逻辑的Typescript组件报错如何解决？

问题根因 #

getStaticProps 是 Next.js 专属的页面数据获取方法，仅对放在 pages/ 目录下的页面级组件生效，框架会自动执行该方法并将返回的属性注入对应页面组件。你将 Blog 作为普通自定义组件导入到首页使用时，Next.js 不会触发 Blog 关联的 getStaticProps 执行，导致 Blog 组件声明需要的 posts 参数没有传入，因此触发类型报错和运行时报错。

解决方案 #

这里提供两种常用修复方案，可根据你的业务需求选择：

方案1：抽离公共数据获取逻辑（推荐，支持预渲染） #

把数据获取逻辑抽成独立函数，在需要用到的页面的 getStaticProps 中调用，再把数据传给 Blog 组件。

1. 抽离公共数据方法：

// lib/getPosts.ts
export type Post = {
  project: string;
};
export const getPosts = async (): Promise<Post[]> => {
  const res = await fetch("http://localhost:3100/");
  return res.json();
};

2. 改造 Blog 组件，明确声明入参类型：

// pages/blog.tsx
import { Post } from "../lib/getPosts";

type BlogProps = {
  posts: Post[];
};
function Blog({ posts }: BlogProps) {
  return (
    <>
      <h3>Hi</h3>
      {console.log(posts)}
    </>
  );
}

// 保留原/blog页面的静态生成能力
import { getPosts } from "../lib/getPosts";
export const getStaticProps = async () => {
  const posts = await getPosts();
  return {
    props: {
      posts,
    },
  };
};

export default Blog;

3. 改造首页，在首页的 getStaticProps 中获取数据传给 Blog：

// pages/index.tsx
import type { NextPage } from "next";
import Blog from "./blog";
import { getPosts, Post } from "../lib/getPosts";

type HomeProps = {
  posts: Post[];
};

const Home: NextPage<HomeProps> = ({ posts }) => {
  return <Blog posts={posts} />;
};

export const getStaticProps = async () => {
  const posts = await getPosts();
  return {
    props: {
      posts,
    },
  };
};

export default Home;

方案2：Blog组件内部客户端获取数据（无需在父组件传参） #

如果不需要预渲染 Blog 内容，可以直接把数据获取逻辑放到组件内部用客户端渲染：

// pages/blog.tsx
import { useEffect, useState } from "react";

type Post = {
  project: string;
};

function Blog() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch("http://localhost:3100/");
      const data = await res.json();
      setPosts(data);
    };
    fetchPosts();
  }, []);

  return (
    <>
      <h3>Hi</h3>
      {console.log(posts)}
    </>
  );
}

export default Blog;

改造后首页直接导入 <Blog /> 不需要传任何参数即可正常使用。

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