Next.js 13.2 SSG页面预渲染报错：无法读取undefined的props属性

可能原因及对应修复步骤 #

1. 组件接收Props的方式错误 #

如果你的MDXLayout是App Router下的页面组件，需确保正确处理参数：

• 避免直接解构可能未定义的嵌套属性，比如const { props } = post;，改用可选链post?.props做安全访问
• App Router的服务器组件接收{ params, searchParams }参数，客户端组件则要确保父组件传递的props完整无缺

2. 检查generateStaticParams的返回值 #

静态生成时，确保generateStaticParams返回的参数没有undefined值：

export async function generateStaticParams() {
  const files = // 正确获取所有MDX文件列表
  return files.map(file => {
    const slug = file.replace('.mdx', '');
    if (!slug) return null; // 过滤无效文件
    return { slug };
  }).filter(Boolean); // 移除null项
}

3. 修正next-mdx-remote的使用方式 #

使用next-mdx-remote处理MDX时：

• 服务器组件中导入MDXRemote需用next-mdx-remote/rsc路径
• 解析frontmatter时添加兜底处理，避免返回undefined：

import matter from 'gray-matter';
import { readFileSync } from 'fs';
import path from 'path';
import { MDXRemote } from 'next-mdx-remote/rsc';

export default async function MDXLayout({ params }) {
  const filePath = path.join(process.cwd(), 'content', `${params.slug}.mdx`);
  const fileContent = readFileSync(filePath, 'utf8');
  const { data: frontmatter, content } = matter(fileContent);

  // 兜底处理，避免frontmatter为undefined
  const safeFrontmatter = frontmatter || {};

  return (
    <div>
      <h1>{safeFrontmatter.title || 'Untitled'}</h1>
      <MDXRemote source={content} />
    </div>
  );
}

4. 检查@next/mdx的配置 #

确保next.config.js中的MDX配置适配App Router：

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
  experimental: {
    appDir: true, // 13.2版本需显式开启App Router
  },
};

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [require('remark-frontmatter'), require('remark-gfm')],
    rehypePlugins: [require('rehype-slug'), require('rehype-autolink-headings')],
  },
});

module.exports = withMDX(nextConfig);

5. 避免客户端组件使用服务器端API #

如果MDXLayout是标记了'use client'的客户端组件，不要在其中使用readFileSync等仅能在服务器端运行的API，应通过服务器组件传递解析好的MDX内容和frontmatter。

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