NextJS getStaticProps 没有将返回的道具传递给页面

Posted 2023-03-30

【中文标题】NextJS getStaticProps 没有将返回的道具传递给页面

【英文标题】：NextJS getStaticProps not passing returned props to page

【发布时间】：2021-03-22 16:32:13

【问题描述】：

我在让我的 getStaticProps 函数将返回的道具传递到 NextJS 中的模板页面时遇到一些问题。

这是我目前拥有的动态页面模板的代码。

// src/pages/blog/[slug].js
import React from 'react';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';

import Layout from '../../components/layout';

export default function BlogPost (frontmatter, markdownBody)
    console.log(`in template Layout: $frontmatter.title`)
    // Output: TypeError: Cannot read property 'title' of undefined
    return (
        <Layout>
            <h1>frontmatter.title</h1>
            <span>JSON.stringify(markdownBody)</span>
        </Layout>
    )


export async function getStaticProps(...ctx)

    const slug = ctx.params;
    console.log(slug)
    // output: first post (this is correct)
    const content = await import(`../../posts/$slug.md`)
    const data = matter(content.default)
    console.log(`In getStaticProps: $data.data.title`)    
    // output: In getStaticProps: first post (this is correct too)
    return 
        props: 
            frontmatter: data.data,
            markdownBody: data.content
        ,
    ;


export async function getStaticPaths()
    const postSlugs = ((context) => 
        const keys = context.keys()
        const data = keys.map((key, index) => 
            let postSlug = key.replace(/^.*[\\/]/, "").slice(0,-3)
            return postSlug
        )
        return data
    )(require.context("../../posts/", true, /\.md$/))
    const paths = postSlugs.map((postSlug) => `/blog/$postSlug`)

    return
    paths,
        fallback: false,
    

在运行网站时，页面无法加载，并在主窗口中引发相同的控制台记录错误。

我有另一个网站以完全相同的方式设置，我绝对没有问题，所以我很难理解为什么从 getStaticProps 返回的道具没有被传递到构建页面的函数中。

任何帮助将不胜感激！

更新

这是编译站点时的错误日志。

TypeError: Cannot read property 'title' of undefined
    at BlogPost (webpack-internal:///./src/pages/blog/[slug].js:24:50)
    at processChild (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/server/render.js:53:851)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at loadGetInitialProps (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderTohtml (/Users/nick/dev/Web/templates/nextjs/simple-blog-template/node_modules/next/dist/next-server/server/render.js:53:1142)

更新 #2

这是markdown文件的内容。

// src/posts/first-post.md

---
title: first post

---

This is a basic first post

【问题讨论】：

能否提供错误日志？

@nickwarters 解构不正确.. 应该是 getStaticProps(params) const slug = params;

@NileshPatel 更改此设置并不能解决问题。返回的 props 仍然没有传递给页面模板。

@QuangThái 我已经更新了错误日志

@nickwarters 这是不同的问题了.. const data = matter(content.default) 没有返回 title 属性.. 请检查 md 文件 posts/$slug.md

【参考方案1】：

问题似乎是由于没有在 _app.js 文件中传递 ...pageProps。 见以下代码：

之前的代码：

import '../styles/main.scss'

export default function MyApp( Component, pageProps ) 
  return <Component />

正确编译的新代码：

import '../styles/main.scss'

export default function MyApp( Component, pageProps ) 
  return <Component ...pageProps />