MERN栈社交应用无法获取帖子创建者用户名，求排查修复

问题描述 #

基于MERN栈开发的社交应用，原本可正常创建并展示含图片、标题、描述的帖子。新增显示帖子创建者用户名功能后，出现“Error fetching from server”错误。

错误排查 #

逐一检查代码后，发现以下核心问题：

• 前后端路由路径不匹配：前端请求接口为http://localhost:5000/getPosts，但后端路由定义为router.get("/")，导致请求找不到对应处理逻辑，返回404错误。
• Mongoose模型引用不匹配：Post Schema中author字段的ref值为'User'，但User模型定义时用的是mongoose.model('users', UserSchema)，模型名称不匹配导致populate关联查询失败，抛出数据库错误。
• 后端响应状态值大小写不一致：后端错误响应的status字段值为'Failed'（首字母大写），但前端判断成功的条件是res.data.status === 'success'（全小写），格式不匹配触发错误提示。
• 前端错误状态初始值类型错误：前端error状态初始值设为数组[]，后续赋值为字符串，导致空数组被判定为真值，显示空错误提示。
• 未传props的组件调用：前端Wall组件中直接调用<SocialPost/>未传任何props，导致组件内部变量undefined，引发渲染警告。

代码修正方案 #

1. 后端路由修正 #

修改路由路径匹配前端请求，同时统一响应状态值格式：

const router = require("express").Router();
const Post = require("../Database/models/posts")

// 修正路由路径为/getPosts，匹配前端请求
router.get("/getPosts", async(req, res) => {
    try {
        const posts = await Post.find({}).populate('author', 'firstname secondname');
        const formattedPosts = posts.map(post => ({
            ...post._doc,
            user: {
                firstname: post.author.firstname,
                secondname: post.author.secondname,
                username: `${post.author.firstname} ${post.author.secondname}`
            }
        }));

        res.status(200).json({
            status: 'success',
            data: {
                posts: formattedPosts
            }
        });
    } catch (err) {
        // 统一状态值为小写的'failed'，匹配前端判断逻辑
        res.status(500).json({
            status: 'failed',
            message: err.message
        });
    }
});

module.exports = router;

2. User模型修正 #

将模型名称改为'User'，与Post Schema中的ref值匹配：

const mongoose = require("mongoose")

const UserSchema = new mongoose.Schema({
    firstname: {type: String, required:true},
    secondname: {type: String, required:true},
    email:{type:String, required:true, unique: true },
    password: {type:String, required:true},
    age:{type:String},
    profilePicture: { type: String },
    isAdmin:{
        type: Boolean, default:false
    }
},
{timestamps: true}
);

// 模型名称改为'User'，与Post Schema的ref:'User'匹配，Mongoose自动创建users集合
const User = mongoose.model('User', UserSchema);
module.exports = User;

3. 前端代码修正 #

• 修正错误状态初始值：

// Wall组件中
const [error, setError] = useState(''); // 改为空字符串

• 移除未传props的<SocialPost/>调用：

// Wall组件return部分
return (
    <>
      <Container>
      <Row>
        <Col> <Filter/> </Col>
        
        <Col xs={6}>
        <div style={{ maxHeight: "calc(100vh - 100px)", overflowY: "auto" }}>
          {/* 移除此处未传props的<SocialPost/> */}
          {posts.map((post,index) => (
            <SocialPost
              key={index}
              img={post.img}
              title={post.title}
              description={post.description}
              username={post.user.username} 
              id={post._id}
            />
          ))}
          {error && <p style={{color:'red'}}>{error}</p>}
        </div>
      </Col>
      
        <Col>3 of 3</Col>
      </Row>
     </Container>
    </>
  )

• 可选：给SocialPost组件添加默认props，避免未传值出错：

const SocialPost = ({img = '', title = '', description = '', username = 'Unknown User'}) => {
  // 原有组件代码
}

验证修复 #

完成上述修改后，重启后端服务和前端应用，即可正常获取帖子数据并显示创建者用户名，不再出现"Error fetching from server"错误。

内容的提问来源于stack exchange，提问作者WADD Samindika