Next.js项目中使用Mongoose从MongoDB取数展示失败求助

你的核心问题出在API路由写法不符合Next.js App Router规范，同时存在模型导入错误、GET路由未返回数据等问题，以下是分步修复：

1. 修正API路由结构与代码 #

Next.js App Router的API路由必须放在app/api/[路由名]/route.js，无需自行启动Express服务器（Next.js自带服务器）。删除原api/fetchInfo.js，创建app/api/fetchinfo/route.js，内容如下：

import mongoose from "mongoose";
import Info from "../../models/inputs"; // 修正模型导入路径

// 封装数据库连接函数，避免重复连接
const connectDB = async () => {
  if (mongoose.connection.readyState === 1) return;
  try {
    await mongoose.connect("mongodb://localhost:27017/logininfo");
    console.log("数据库连接成功");
  } catch (err) {
    console.error("数据库连接失败:", err);
    throw err;
  }
};

// 处理GET请求，返回所有用户数据
export async function GET() {
  await connectDB();
  
  try {
    const users = await Info.find({}); // 查询所有用户数据
    return new Response(JSON.stringify(users), {
      headers: { "Content-Type": "application/json" },
      status: 200,
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: "获取数据失败" }), {
      status: 500,
    });
  }
}

// （可选）保留POST接口用于创建用户，无需可删除
export async function POST(req) {
  await connectDB();
  
  try {
    const body = await req.json();
    const newUser = await Info.create(body);
    return new Response(JSON.stringify(newUser), {
      headers: { "Content-Type": "application/json" },
      status: 201,
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: "创建用户失败" }), {
      status: 500,
    });
  }
}

2. 优化Dashboard页面代码 #

原Dashboard逻辑无大问题，可优化状态初始化和错误提示，同时改用相对路径避免环境冲突：

// app/dashboard/page.js
"use client"
import React, { useState, useEffect } from 'react';

const Dashboard = () => {
    const [data, setData] = useState([]); // 初始化为空数组，避免map报错
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const res = await fetch("/api/fetchinfo"); // 使用相对路径
                if (!res.ok) {
                    throw new Error(`请求失败: ${res.status}`);
                }
                const users = await res.json();
                setData(users);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    if (loading) {
        return <p>加载中...</p>;
    }

    if (error) {
        return <p>错误: {error}</p>;
    }

    return (
        <div>
            {data.length > 0 ? (
                data.map((item) => (
                    <p key={item._id}>{item.username} - {item.email}</p> // 用数据库自带_id作为key，更可靠
                ))
            ) : (
                <p>暂无数据</p>
            )}
        </div>
    );
}

export default Dashboard;

3. 最后检查项 #

• 确认MongoDB服务正常运行，数据库logininfo存在且已有用户数据
• 启动Next.js时，确保无其他服务占用3000端口（原Express代码的app.listen(3000)已删除，不会再冲突）
• 确认models/inputs.js的导出逻辑正确（原代码无问题）

完成以上修改后，Dashboard页面即可正常从数据库获取并展示数据。

内容的提问来源于stack exchange，提问作者1211 - F - Aman Pandey