NextJS/MongoDB项目无法获取排序后的Projects问题排查

一、修复/api/Project接口的500错误 #

1. 修正NextResponse调用语法 #

你的route.js中new NextResponse.json()是错误写法，NextResponse.json是静态方法，无需new关键字：

// 错误写法
return new NextResponse.json({ projects });
// 正确写法
return NextResponse.json({ projects });

// 错误写法
return NextResponse.json({ message: "Error", error }, { status: 500 });
// 正确写法（需将error转为可序列化的文本）
return NextResponse.json({ message: "Error", error: error.message }, { status: 500 });

2. 规范获取请求参数（Next.js App Router） #

App Router中无需手动解析URL，直接用req.nextUrl.searchParams获取查询参数，避免解析错误：

export async function GET(req) {
  const userId = req.nextUrl.searchParams.get("userId");
  const sortKey = req.nextUrl.searchParams.get("sortKey");
  const sortOrder = req.nextUrl.searchParams.get("sortOrder");

  try {
    // ... 后续逻辑
  } catch (error) {
    return NextResponse.json({ message: "Error", error: error.message }, { status: 500 });
  }
}

3. 处理排序字段为空的边界情况 #

若selectedColumn无有效值，sortKey会是undefined，传给MongoDB会触发错误，需添加校验：

try {
  let sortObj = {};
  // 校验sortKey是否为合法字段，无有效值则用默认排序
  if (sortKey && ["createdAt", "name", "updatedAt"].includes(sortKey)) {
    sortObj[sortKey] = sortOrder === "desc" ? -1 : 1;
  } else {
    sortObj.createdAt = -1;
  }

  const projects = await Project.find({ userId }).sort(sortObj);
  return NextResponse.json({ projects });
} catch (error) {
  return NextResponse.json({ message: "Error", error: error.message }, { status: 500 });
}

4. 修复前端异步函数调用问题 #

getSortedProjects是异步函数，直接在useEffect中调用会返回Promise而非实际数据，需用async/await包裹：

useEffect(() => {
  const fetchProjects = async () => {
    const selectedColumn = Object.keys(sortMap).find((key) => sortMap[key]);
    const selectedOrder = Object.values(sortMap).find((val) => val !== null);

    try {
      const sortedProjects = await getSortedProjects(
        currentUser.id,
        selectedColumn,
        selectedOrder
      );
      setProjects(sortedProjects);
      setRefreshingProject(true);
    } catch (error) {
      console.error("Failed to sort Projects", error);
    }
  };

  fetchProjects();
}, [sortMap]);

5. 确认数据库连接与模型导入 #

检查route.js顶部是否正确导入Project模型并初始化数据库连接：

import Project from "@/models/Project";
import { connectDB } from "@/lib/db";

export async function GET(req) {
  await connectDB(); // 先执行数据库连接
  // ... 后续逻辑
}

二、修复/api/Project/User/[id]接口的404错误 #

1. 确认路由文件结构 #

在App Router中，动态路由/api/Project/User/[id]对应的文件路径必须为：

/app/api/Project/User/[id]/route.js

注意：[id]是文件夹名称，内部必须包含小写的route.js文件。

2. 正确获取动态路由参数 #

在route.js中通过第二个参数params获取动态ID：

export async function GET(req, { params }) {
  await connectDB();
  const userId = params.id;

  try {
    const projects = await Project.find({ userId });
    return NextResponse.json({ projects });
  } catch (error) {
    return NextResponse.json({ message: "Error", error: error.message }, { status: 500 });
  }
}

三、高效调试技巧 #

1. 后端打印详细错误：在route.js的catch块中输出错误详情，方便定位：

catch (error) {
  console.error("API Error:", error); // 终端会显示具体错误信息
  return NextResponse.json({ message: "Error", error: error.message }, { status: 500 });
}

2. 前端查看响应错误：在getSortedProjects的catch块中打印后端返回的错误：

catch (error) {
  console.error("Request Error:", error.response?.data);
  throw new Error("Failed to get Projects by User id");
}

内容的提问来源于stack exchange，提问作者Kyle Hinks