Next.js 13路由处理器获取登录表单数据为空的问题求助

1. 修正Route Handler的核心错误 #

你的路由处理代码存在三个关键问题：

• request.formData()是异步方法，必须用await才能拿到实际数据
• 函数定义末尾缺少闭合大括号，语法错误
• NextResponse拼写错误（写成了NextResposne）

修正后的app/api/route.js代码：

import { NextResponse } from 'next/server';

export async function POST(request) {
    const data = await request.formData();
    // 转换为普通对象方便返回查看
    const formDataObj = Object.fromEntries(data.entries());
    return NextResponse.json({ data: formDataObj });
}

2. 修正表单输入框的ID重复问题 #

密码输入框的ID和用户名输入框重复（均为id="username"），虽然不直接导致FormData为空，但违反HTML规范，建议修正为：

export default function Page() {
    return (
        <div>
            <form action="/api" method="post" className="...">
                <input type="text" name="username" id="username" className="..." />
                <input type="password" name="password" id="password" className="..." />
                <input type="submit" id="submit" value="submit" className="..." />
            </form>
        </div>
    )
}

3. 排查验证（可选） #

如果问题仍存在，可在路由处理中添加日志排查：

export async function POST(request) {
    const data = await request.formData();
    // 打印所有表单条目到终端
    console.log('Received FormData:', [...data.entries()]);
    const formDataObj = Object.fromEntries(data.entries());
    return NextResponse.json({ data: formDataObj });
}

查看终端输出，确认是否接收到表单字段，以此区分是前端提交问题还是后端解析问题。

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