Next.js传递data1遇TS错误：Property 'data1'缺失，如何修复？

1. 修正getServerSideProps中的代码错误 #

你的getServerSideProps存在两处关键问题：

• 未定义res变量却调用res.json()，读取本地db.json不需要这个异步操作
• 读取本地JSON文件用require已足够，无需额外异步处理

修正后的基础版本：

export async function getServerSideProps() {
  // 直接读取本地db.json文件
  const data1 = require("./db.json");

  return { props: { data1 } };
}

如果需要动态读取文件内容（比如文件会实时更新），可改用fs模块同步读取：

import fs from "fs";
import path from "path";

export async function getServerSideProps() {
  const filePath = path.join(process.cwd(), "db.json");
  const jsonData = fs.readFileSync(filePath, "utf-8");
  const data1 = JSON.parse(jsonData);

  return { props: { data1 } };
}

注意：用import替代require更符合TypeScript规范，且process.cwd()指向项目根目录，确保文件路径正确。

2. 解决TypeScript类型报错 #

错误提示是因为TypeScript判定组件的data1为必填props，但存在未传入的潜在可能，可通过两种方式处理：

方式一：将data1设为可选类型 #

const Home: NextPage = ({ data1 }: { data1?: any }) => {
  // 初始化state时处理data1为undefined的情况
  const [data, setData] = React.useState(data1 || []); // 根据你的数据结构设置默认值
  // ...其他代码逻辑
};

方式二：明确props类型，让TypeScript自动推断 #

定义专属props接口，并给getServerSideProps指定返回类型：

interface HomeProps {
  data1: any; // 建议替换为db.json对应的具体类型，比如`Item[]`
}

const Home: NextPage<HomeProps> = ({ data1 }) => {
  const [open, setOpen] = React.useState(false);
  const [data, setData] = React.useState(data1);
  // ...其他代码逻辑
};

export async function getServerSideProps(): Promise<{ props: HomeProps }> {
  const data1 = require("./db.json");
  return { props: { data1 } };
}

这种方式能让TypeScript明确知道getServerSideProps会返回符合要求的props，消除类型报错。

3. 额外优化建议 #

• 避免使用any类型，根据db.json的实际结构定义具体类型，比如：

  interface TodoItem {
    id: number;
    title: string;
    completed: boolean;
  }
  
  interface HomeProps {
    data1: TodoItem[];
  }
  

• 若db.json可能不存在，在getServerSideProps中添加错误捕获逻辑，避免服务端崩溃。

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