diff --git a/src/pages/Forum/PostDetailPage.jsx b/src/pages/Forum/PostDetailPage.jsx
new file mode 100644
index 0000000..6cdabd6
--- /dev/null
+++ b/src/pages/Forum/PostDetailPage.jsx
@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { useRoute } from 'wouter';
+import axios from 'axios';
+import './PostDetailPage.css';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const PostDetailPage = () => {
+  const [post, setPost] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [errorMsg, setErrorMsg] = useState('');
+  
+  // 使用 wouter 的 useRoute 获取 postId 参数
+  const { params } = useRoute('/forum/post/:postId');
+  const postId = params?.postId;
+
+  useEffect(() => {
+    const fetchPostDetail = async () => {
+      setLoading(true);
+      setErrorMsg('');
+      try {
+        const response = await axios.get(`${API_BASE}/echo/forum/posts/${postId}`);
+        setPost(response.data);
+      } catch (error) {
+        console.error('获取帖子详情失败:', error);
+        setErrorMsg('加载失败，请稍后重试');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (postId) {
+      fetchPostDetail();
+    }
+  }, [postId]);
+
+  if (loading) return <p>加载中...</p>;
+  if (errorMsg) return <p className="error-text">{errorMsg}</p>;
+  if (!post) return <p>没有找到该帖子。</p>;
+
+  return (
+    <div className="post-detail-page">
+      <h2>{post.title}</h2>
+      <div className="post-meta">
+        <span>作者：{post.userProfile.nickname}</span>
+        <span>发布时间：{new Date(post.created_at).toLocaleString()}</span>
+      </div>
+      <div className="post-content">
+        <p>{post.content}</p>
+      </div>
+      {post.cover_image_url && (
+        <div className="post-image">
+          <img src={post.cover_image_url} alt="封面" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PostDetailPage;