Next.js TypeScript中ServerSideProps传递NextPage报错解决

问题场景 #

我希望通过getServerSideProps方法从新闻API获取数据，将数据传递给Home页面后再传入子组件News中，但目前遇到报错：提示从getServerSideProps返回的value无法找到，同时Props接口定义处也存在错误。

原代码如下：

import type { NextPage } from 'next'
import Head from 'next/head'
import Feed from './components/Feed';
import News from './components/News';

import Link from 'next/link';
import axios from 'axios';

import Post from './components/Post';
import Sidebar from './components/Sidebar';

export interface Props {
    value?:value  // 此处报错
  }


const Home: NextPage<Props> = ({ value }) => {

    
  return (
    <div className="">
      <Head>
        <title>Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>



      <div className=" flex  bg-gray-200 space-x-3">
        <Sidebar />
       
        <div className="py-2  flex flex-col">
        <Post/>
        <Feed/>
        </div>
    
        <News value={value} /> // 想把数据传到这个子组件渲染
        </div>
    </div>
  )
}

export default Home


export async function getServerSideProps() {
    const res = await axios.get('http://localhost:3000/api/news');
    const {data: value} = res;
    console.log(value);
    if (!value) {
        return {
            notFound: true
        };
    }
    return {
        props: {
            value
        }
        
        
    };
    
}

错误原因 #

1. Props接口类型未定义：Props里的value?:value是无效语法，第二个value作为类型使用，但未提前定义该类型，TypeScript无法识别。
2. 类型不匹配导致属性识别失败：因Props接口的错误，TypeScript无法确认getServerSideProps返回的value是Home组件的合法props，因此提示找不到该属性。

修复方案 #

步骤1：定义value的具体类型 #

根据新闻API的返回结构，定义对应类型。若暂时不确定结构，可先用unknown过渡（后续建议补全明确类型）：

// 示例：假设新闻数据是数组，每条新闻包含id、title、content字段
type NewsItem = {
  id: number;
  title: string;
  content: string;
};

type NewsData = NewsItem[];

步骤2：修正Props接口 #

将Props中的value类型指向刚定义的NewsData：

export interface Props {
  value?: NewsData; // 类型明确，不再报错
}

步骤3：确保子组件News接收正确类型 #

在News组件文件中，同步定义对应的props类型：

// components/News.tsx
import type { NewsData } from '../pages/index';

interface NewsProps {
  value?: NewsData;
}

const News = ({ value }: NewsProps) => {
  return (
    <div>
      {value?.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.content}</p>
        </div>
      ))}
    </div>
  );
};

export default News;

完整修复后的Home页面代码 #

import type { NextPage } from 'next'
import Head from 'next/head'
import Feed from './components/Feed';
import News from './components/News';

import Link from 'next/link';
import axios from 'axios';

import Post from './components/Post';
import Sidebar from './components/Sidebar';

// 定义新闻数据类型
type NewsItem = {
  id: number;
  title: string;
  content: string;
};

type NewsData = NewsItem[];

export interface Props {
  value?: NewsData;
}

const Home: NextPage<Props> = ({ value }) => {
  return (
    <div className="">
      <Head>
        <title>Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="flex bg-gray-200 space-x-3">
        <Sidebar />
        <div className="py-2 flex flex-col">
          <Post />
          <Feed />
        </div>
        <News value={value} />
      </div>
    </div>
  )
}

export default Home

export async function getServerSideProps() {
  const res = await axios.get('http://localhost:3000/api/news');
  const { data: value } = res;
  console.log(value);
  
  if (!value) {
    return { notFound: true };
  }
  
  return { props: { value } };
}

额外说明 #

• 尽量避免使用any类型，明确的类型能提供更好的TypeScript检查和编辑器提示。
• 若API返回结构不同，只需调整NewsItem和NewsData的定义即可适配。

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