NextJS 无法读取未定义的属性（读取“slug”）

Question

我从我正在构建的博客网站的 Post.js 文件收到此服务器错误，但不知道如何修复它。经过长时间的搜索/调查，我找不到任何可以帮助纠正它的东西，所以如果有人能指出我正确的方向，那么这个 NextJS 新手将非常感激。谢谢！

类型错误：无法读取未定义的属性（读取“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();
};

Answer 1

已解决 上面的服务器错误源于博客文章 Markdown 架构。如果 .md 页面标题用双引号引起来，则不会引发错误。发生错误时，所有新的 Markdown 页面均不带引号，例如

title: Issue 1

...BAR 用双引号写的一页，例如

title: "Issue 2"

一定是把一切都结合在一起的。一旦我删除了带有双引号的 .md 页面，就会出现上面的服务器错误。

研究 TinaCMS 的配置以在

"double quotes"

中写入 slug 标题。感谢您上面的帮助，非常感谢。