如何避免getServerSideProps解析后访问'res'？NextJS报错求助

架构老林

2026-7-9

问题原因

你触发警告的核心原因是：在getServerSideProps函数执行完成（返回结果）之后，仍然在异步回调里操作res对象。

看你代码里的逻辑：当找到fileId时，你给GridFS的下载流绑定了data和end事件回调，然后直接执行了return { props: {} }。这时候getServerSideProps已经完成执行（被标记为resolve），但后续流的data、end事件是异步触发的，此时再调用res.write()、res.end()就属于“解析后访问res”，触发了NextJS的警告。

修复方案

把流的处理逻辑包装成Promise，确保所有对res的操作都在getServerSideProps执行完成前完成。可以直接用pipe方法简化流的传输，同时通过Promise等待流传输结束：

修改[hash].tsx中getServerSideProps里的fileId分支代码：

if (fileId) {
  const bucket = new GridFSBucket(database)
  const id = new ObjectId(fileId)
  const files: GridFSFile[] = await bucket.find({ _id: id }).toArray()
  const file = files[0]
  const { contentType, length } = file || {}

  res.writeHead(200, { 
    'Content-Type': contentType,
    'Content-Length': length.toString() // 可选，加上更规范
  })

  // 用Promise包裹流的处理，等待传输完成
  await new Promise<void>((resolve, reject) => {
    bucket.openDownloadStream(id)
      .pipe(res)
      .on('finish', () => {
        resolve()
      })
      .on('error', (err) => {
        reject(err)
      })
  })

  // 因为已经直接向客户端发送了文件响应，这里返回空props即可，页面不会被渲染
  return { props: {} }
}

额外说明