NextJS报错：Cannot read properties of undefined (reading 'slug') 求助

我在搭建个人博客网站时，Post.js文件出现了如下服务器错误。作为NextJS新手，已花费大量时间搜索排查但仍无法解决，希望有人能指点修复方向！

错误信息 #

TypeError: Cannot read properties of undefined (reading 'slug') #

const Post = ({
 10 |   post: {
> 11 |     slug,
    |    ^
 12 |     content,
 13 |     frontMatter: { title, image, date, author, description },
 14 |   },

相关代码 #

Post.js #

import BlurImage from "@/components/BlurImage";
import { formatDate } from "@/utils/formatDate";
import { Calender, Clock } from "@/utils/Icons";
import { readingTime } from "@/utils/readingTime";
import { slugify } from "@/utils/slugify";
import { truncateString } from "@/utils/truncateString";
import Link from "next/link";

const Post = ({
 post: {
 slug,
 content,
 frontMatter: { title, image, date, author, description },
 },
 authors,
 compact,
 status,
}) => {
 return (
 <article className="bg-white d-flex flex-column h-100">
 {!compact && (
 <div className="post-image">
 <Link href={`/lotw/${slug}`} className="d-block" title={title}>
 <BlurImage
 className="w-100 h-auto"
 src={image}
 alt={`Hero image of Issue ${title}`}
 width="368"
 height="238"
 />
 </Link>
 </div>
 )}
 <div
 className={`p-4 ${authors != "current" ? "pb-0" : ""} ${
 status ? "position-relative" : ""
 }`}
 >
 {status && <p className="post-badge mb-0">{status}</p>}
 <ul className={`post-meta list-inline mb-3 ${status ? "mt-3" : ""}`}>
 <li className="list-inline-item">
 <Calender className="me-1 align-bottom" />
 {formatDate(date)}
 </li>
 <li className="list-inline-item">•</li>
 <li className="list-inline-item">
 <Clock className="me-1 align-bottom" />
 {readingTime(content)} min read
 </li>
 </ul>
 <div className="position-relative">
 <h3 className="h4 post-title mb-2 line-clamp clamp-2">
 <Link
 href={`/lotw/${slug}`}
 className="text-link stretched-link"
 title={title}
 >
 {title}
 </Link>
 </h3>
 <p className={`mb-0 line-clamp ${compact ? "clamp-2" : "clamp-3"}`}>
 {truncateString(description, 150)}
 </p>
 </div>
 </div>
 {authors != "current" &&
 (compact ? (
 <div className="post-author mt-auto p-4 pt-3">
 <Link
 href={`/author/${slugify(author)}`}
 className="is-hoverable"
 title={`Read all posts by - ${author}`}
 >
 {authors.map(
 (authorPage, key) =>
 slugify(author) === authorPage.authorSlug && (
 <span className="d-inline-block" key={key}>
 <BlurImage
 src={authorPage.authorFrontMatter.image}
 alt={author}
 className="w-auto"
 width="26"
 height="26"
 />
 </span>
 )
 )}
 </Link>
 <span className="ms-3 me-2">by</span>
 <Link
 className="text-link"
 href={`/author/${slugify(author)}`}
 title={`Read all posts by - ${author}`}
 >
 {author}
 </Link>
 </div>
 ) : (
 <div className="post-author d-flex mt-auto p-4">
 <div className="flex-shrink-0">
 <Link
 href={`/author/${slugify(author)}`}
 className="is-hoverable"
 title={`Read all posts by - ${author}`}
 >
 {authors.map(
 (authorPage, key) =>
 slugify(author) === authorPage.authorSlug && (
 <span className="d-inline-block rounded-circle" key={key}>
 <BlurImage
 src={authorPage.authorFrontMatter.image}
 alt={author}
 className="w-auto"
 width="42"
 height="42"
 />
 </span>
 )
 )}
 </Link>
 </div>
 <div className="flex-grow-1 ms-3">
 <p className="mb-0 lh-base small">Written by</p>
 <Link
 className="text-link"
 href={`/author/${slugify(author)}`}
 title={`Read all posts by - ${author}`}
 >
 {author}
 </Link>
 </div>
 </div>
 ))}
 </article>
 );
};
export default Post;

slugify.js #

export const slugify = (string) => {
 return string.trim().replace(/ /g, "-").toLowerCase();
};

修复方向 #

这个错误的核心是传递给Post组件的post属性为undefined，导致解构时无法读取slug。按以下步骤排查：

• 检查Post组件的调用处
  找到所有使用<Post />的地方，确认是否正确传入了post参数。比如在列表页或详情页中，是否从getStaticProps/getServerSideProps获取了正确的post数据并传递给组件。如果调用时漏传post，就会触发这个错误。

• 验证数据获取逻辑
  如果是通过getStaticProps/getServerSideProps获取post数据，检查数据是否正确返回：

  • 读取本地md文件时，确认文件路径、frontmatter格式是否正确；
  • 调用API时，确认请求成功，返回的数据结构包含slug、content、frontMatter等字段；
  • 可以在数据获取函数中添加console.log(post)，确认数据是否存在且结构符合预期。

• 添加默认值避免解构报错
  为防止数据缺失导致组件崩溃，给Post组件的props设置默认值或使用可选链：

  // 方式1：设置默认值
  const Post = ({
    post = { slug: '', content: '', frontMatter: { title: '', image: '', date: '', author: '', description: '' } },
    authors = [],
    compact = false,
    status = '',
  }) => {
    const { slug, content, frontMatter: { title, image, date, author, description } } = post;
    // 剩余代码不变
  }
  
  // 方式2：使用可选链和解构默认值
  const Post = ({ post, authors, compact, status }) => {
    const { slug = '', content = '', frontMatter: { title = '', image = '', date = '', author = '', description = '' } = {} } = post || {};
    // 剩余代码不变
  }
  

• 检查slug生成逻辑
  确保生成post数据时，slug字段已正确生成。如果是从frontmatter的title生成slug，检查slugify函数是否被正确调用，且title不为空。

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