You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js 15 + TypeScript项目升级后posts属性为undefined问题求助

Next.js 15 + TypeScript项目升级后posts属性为undefined问题求助

大家好,我最近在把一个Next.js 13 Pages Router的项目升级到Next.js 15 + TypeScript,纯当练手,但遇到了不少undefined的问题,尤其是获取文章数据这块卡壳了。

这个项目是Udemy某门课程里的案例,我用fs、path和gray-matter读取根目录下postsDB文件夹里的Markdown文件元数据和内容时,posts props一直是undefined。更奇怪的是,工具文件里的所有console.log和console.error都没在控制台输出,完全找不到排查方向。

下面是相关代码和细节:

相关代码

工具文件:posts-util.ts

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'postsDB');
console.log("Posts directory path:", postsDirectory); 

if (!fs.existsSync(postsDirectory)) {
    console.error("Posts directory does not exist:", postsDirectory); 
  }

function getPostData(fileName: string) {
  const filePath = path.join(postsDirectory, fileName);
  const fileContent = fs.readFileSync(filePath, 'utf-8');
  const { data, content } = matter(fileContent);

  const postSlug = fileName.replace(/\.md$/, '');

  const postData = {
    slug: postSlug,
    date: data.date,
    isFeatured: data.isFeatured || false,
    ...data,
    content,
  };

  return postData;
}

export function getAllPosts() {
  const postFiles = fs.readdirSync(postsDirectory);
  console.log("Post files:", postFiles);

  const allPosts = postFiles.map(postFile => {
    return getPostData(postFile);
  });

  console.log("All posts:", allPosts); 

  const sortedPosts = allPosts.sort((postA, postB) => (postA.date > postB.date ? -1 : 1));

  return sortedPosts;
}

export function getFeaturedPosts() {
  const allPosts = getAllPosts();
  console.log("All posts in getFeaturedPosts:", allPosts); 

  const featuredPosts = allPosts.filter(post => post.isFeatured);
  console.log("Featured posts:", featuredPosts); 

  return featuredPosts;
}

首页文件:index.tsx

import FeaturedPosts from "@/components/home-page/featured-posts";
import Hero from "@/components/home-page/hero";
import { Post } from "@/interfaces/Post";
import { getFeaturedPosts } from "@/lib/posts-util";

interface HomePageProps {
  posts: Post[];
}

export default function HomePage({ posts }: HomePageProps) {
  console.log("HomePage posts:", posts); 

  return (
    <>
      <Hero />
      <FeaturedPosts posts={posts} />
    </>
  );
}

export async function getStaticProps() {
  console.log("getStaticProps called"); 
  const featuredPosts = getFeaturedPosts();
  console.log("Featured posts in getStaticProps:", featuredPosts); // Debugging line

  return {
    props: {
      posts: featuredPosts,
    },
    revalidate: 1800,
  };
}

组件文件

posts-grid.tsx
import PostItem from "./post-item";

import { Post } from "@/interfaces/Post";

import styles from "@/styles/posts-grid.module.css";


interface PostsGridProps {
  posts: Post[];
}

export default function PostsGrid({ posts = [] }: PostsGridProps) {
  return (
    <ul className={styles.grid}>
      {posts.map(post => (
        <PostItem key={post.slug} post={post} />
      ))}
    </ul>
  );
}
featured-posts.tsx
import PostsGrid from "../posts/posts-grid";
import { Post } from "@/interfaces/Post";
import styles from "@/styles/featured-posts.module.css";

interface FeaturedPostsProps {
  posts: Post[];
}

export default function FeaturedPosts({ posts }: FeaturedPostsProps) {
  console.log("FeaturedPosts posts:", posts);

  return (
    <section className={styles.latest}>
      <h2>Featured Posts</h2>
      <PostsGrid posts={posts} />
    </section>
  );
}

我的疑点

  1. 工具文件里的日志完全没输出,是不是这个文件根本没被执行?
  2. Next.js 15对Pages Router的getStaticProps有没有什么我没注意到的变更?
  3. 会不会是文件路径解析的问题?比如process.cwd()在Next.js 15里的返回值变了?

有没有大佬能帮我分析下问题出在哪?

备注:内容来源于stack exchange,提问作者Rodhis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 08:38:04