Next.js14服务端动作中writeFile不接受Buffer参数的TS问题

问题场景 #

在Next.js 14的服务端动作文件中实现本地图片上传时，使用fs/promises的writeFile函数传递Buffer参数，触发TypeScript编译错误：类型'Buffer'无法赋值给类型'string | ArrayBufferView | ...'。

相关代码片段：

'use server'

import path from "path";
import { writeFile } from "fs/promises";

async function uploadImage(file: File) {
    try {
        const uploadedFileName = `${Date.now()}_${file.name}`;
        const filePath = path.join(process.cwd(), 'public', 'images', uploadedFileName);

        const arrayBuffer = await file.arrayBuffer();
        const buffer = Buffer.from(arrayBuffer);
        await writeFile(filePath, buffer); // 此处触发错误
    } catch (error) {
        console.log(error);
        throw error;
    }
}

解决方法 #

1. 显式断言Buffer类型 #

TypeScript中Buffer本质是Uint8Array的子类，属于ArrayBufferView类型范畴，直接通过类型断言即可绕过推断问题：

await writeFile(filePath, buffer as ArrayBufferView);

2. 直接使用Uint8Array替代Buffer #

既然writeFile原生支持ArrayBufferView类型，可以跳过Buffer.from转换，直接将ArrayBuffer转为Uint8Array传入：

const arrayBuffer = await file.arrayBuffer();
await writeFile(filePath, new Uint8Array(arrayBuffer));

3. 修复TypeScript类型依赖 #

如果上述方法无效，检查项目的@types/node版本是否与当前Node.js版本匹配，确保类型定义正确：

• 安装/更新@types/node：

  npm install @types/node --save-dev
  

• 调整tsconfig.json的编译配置，确保target版本不低于ES2017，并包含必要的lib：

  {
    "compilerOptions": {
      "target": "ES2017",
      "lib": ["ESNext", "DOM"],
      // 其他现有配置
    }
  }
  

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