Next.js/React项目GET请求报500内部服务器错误求助

• 大学课程网站开发作业，跟随教程实现披萨售卖站点
• 异常现象：本地启动后首次访问页面白屏，刷新后所有功能（商品展示、下单等）均可正常使用
• 白屏状态下开发者工具检测到500 Internal Server Error报错
• 报错截图：
  
  
• 本地终端运行日志截图：
  
  
  
  
  
• 初步怀疑问题出在api/products/index文件，对应代码如下：

import dbConnect from "../../../utilities/mongo"
import Product from "../../../models/Product"

export default async function handler(req, res) {
    const {method, cookies} = req;

    const token = cookies.token

    dbConnect()

    if(method === "GET"){
        try {
            const product = await Product.find();
            res.status(200).json(product);
        } catch (err) {
            res.status(500).json(err)
        }
        }

    if(method === "POST"){
        if(!token || token !== process.env.TOKEN){
            return res.status(401).json("Not Authorized")
        }
        try{
            const product = await Product.create(req.body);
            res.status(201).json(product)
        }catch(err){
            res.status(500).json(err);
        }
    }
  }

• 全量项目代码已上传GitHub仓库：mellowyellowpizzaria

代码中的dbConnect()是异步数据库连接方法，调用时没有加await等待连接完成，就直接执行了后续的数据库查询操作：

• 首次访问时，MongoDB连接还处于建立过程中，Product.find()无法获取有效数据库连接，直接抛出异常返回500，导致前端白屏
• 刷新页面时，之前触发的数据库连接已经完成建立，后续查询可以正常执行，所以所有功能恢复正常，和遇到的现象完全匹配。

给dbConnect()调用加上await关键字，确保数据库连接成功后再执行后续的数据库操作，修改后对应代码段如下：

export default async function handler(req, res) {
    const {method, cookies} = req;

    const token = cookies.token
    // 等待数据库连接完成后再执行后续逻辑
    await dbConnect()

    if(method === "GET"){
        try {
            const product = await Product.find();
            res.status(200).json(product);
        } catch (err) {
            res.status(500).json(err)
        }
    }

    if(method === "POST"){
        if(!token || token !== process.env.TOKEN){
            return res.status(401).json("Not Authorized")
        }
        try{
            const product = await Product.create(req.body);
            res.status(201).json(product)
        }catch(err){
            res.status(500).json(err);
        }
    }
}

修改完成后重启本地服务，首次访问就不会再出现白屏和500报错。

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