Next.js中使用getStaticProps返回数据时提示data未定义的问题求助

错误根因 #

getStaticProps 执行完成后，返回的props字段下的所有属性会作为入参传递给当前页面组件，你的EditForm页面组件没有声明接收fetchedData属性，直接在JSX中引用未声明的变量，因此触发未定义报错。

修复后的完整代码 #

import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import EditProject from "../../components/EditProjectForm";

// 定义props类型，可根据你的实际接口返回结构调整
interface EditFormProps {
  fetchedData: {
    // 此处填写你接口返回的单条project数据的字段类型，不确定可暂时写any
    [key: string]: any
  }
}

// 基于数据生成对应数量的静态页面
export const getStaticPaths = async () => {
    const response = await fetch(`http://b560-45-248-23-129.ngrok.io/projects`)
    const data = await response.json()
    console.log(data)
    const path = data.result.map(project => {
        return{
            params: {id:project.project_ID}
        }
    })
    return{
        paths:path,
        fallback: false
    }
}
// 获取单条数据
export const getStaticProps = async (context) => {
    const id = context.params.id
    const response = await fetch(`http://b560-45-248-23-129.ngrok.io/projects/${id}`)
    // 单条数据对象
    const data = await response.json()
    return{
        props: {fetchedData:data},
    }
}

// 此处新增props接收逻辑
const EditForm = ({ fetchedData }: EditFormProps) => {
    return(
        <MainComponentLayout ComponentToRender = {<EditProject fetchedData = {fetchedData}/>}/>
    )
}

export default EditForm

额外优化建议 #

• 当前设置fallback: false，仅会在构建时生成已有的project id对应的页面，新增的project对应页面会直接返回404，如有动态内容访问需求，可将fallback改为'blocking'按需生成静态页面。
• 接口域名建议通过环境变量引入，避免硬编码带来的多环境适配问题。

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