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> ); }
我的疑点
- 工具文件里的日志完全没输出,是不是这个文件根本没被执行?
- Next.js 15对Pages Router的
getStaticProps有没有什么我没注意到的变更? - 会不会是文件路径解析的问题?比如
process.cwd()在Next.js 15里的返回值变了?
有没有大佬能帮我分析下问题出在哪?
备注:内容来源于stack exchange,提问作者Rodhis
相关产品推荐
相关产品推荐

