NextJS Cannot read properties of undefined (reading 'slug')

Question

I received this Server Error from a Post.js file from a blog site i'm building and can't figure out how to fix it. After a lengthy search/investigation i'm unable to find anything to help correct it so if anyone can point me in the right direction to do so it'll be truly appreciated by this NextJS novice guy. Thank you!

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();
};