Next.js 14 App Router使用BlobServiceClient下载Azure Blob遇TS问题

问题分析 #

你遇到的两个核心TypeScript问题：

• req.nextUrl类型错误：默认Request类型没有nextUrl属性，被迫用as any断言绕过检查
• ReadableStream类型不兼容：Azure Blob SDK返回的是Node.js环境的ReadableStream，而浏览器标准的Response构造函数期望Web API的ReadableStream，两者类型不匹配导致报错

虽然用as any能临时让代码运行，但会丢失TypeScript的类型安全保障，以下是更规范的解决方案。

解决方案 #

1. 正确处理请求参数的类型 #

Next.js App Router的API路由中，请求对象应使用NextRequest类型（从next/server导入），它原生包含nextUrl属性，无需额外类型断言。

2. 解决流类型不兼容问题 #

可以通过两种合规方式处理：

• 方式一：Node流转Web流：利用stream/web模块的Readable.toWeb()方法，将Node环境的流转换为Web标准流，完全符合Response构造函数的类型要求
• 方式二：精确类型断言：如果能确认流一定存在，用as ReadableStream<Uint8Array>代替as any，保留部分类型检查能力

优化后的完整代码 #

import { BlobServiceClient } from "@azure/storage-blob";
import { NextRequest, NextResponse } from "next/server";
import { Readable } from "stream/web";

export async function GET(req: NextRequest) {
  try {
    // 正确获取fileName参数，无需any断言
    const filename = req.nextUrl.searchParams.get('fileName');
    if (!filename) {
      return NextResponse.json(
        { error: 'fileName参数不能为空' },
        { status: 400 }
      );
    }

    // 校验环境变量是否配置
    const connString = process.env.STORAGE_ACCOUNT_CONNSTRING;
    const containerName = process.env.ZIP_CONTAINER;
    if (!connString || !containerName) {
      return NextResponse.json(
        { error: '存储服务配置不完整' },
        { status: 500 }
      );
    }

    // 初始化Azure Blob客户端并获取文件流
    const blobServiceClient = BlobServiceClient.fromConnectionString(connString);
    const containerClient = blobServiceClient.getContainerClient(containerName);
    const blobClient = containerClient.getBlobClient(filename);
    const downloadResponse = await blobClient.download();
    const blobStream = downloadResponse.readableStreamBody;

    if (!blobStream) {
      return NextResponse.json(
        { error: '无法获取文件流' },
        { status: 500 }
      );
    }

    // 将Node流转换为Web标准流，解决类型不兼容问题
    const webStream = Readable.toWeb(blobStream);

    return new Response(webStream, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
        "Content-Type": "application/zip"
      }
    });
  } catch (error) {
    console.error('下载错误:', error);
    return NextResponse.json(
      { error: '下载文件时发生错误' },
      { status: 500 }
    );
  }
};

关键修改说明 #

• 替换Request为NextRequest：直接合法访问nextUrl，消除类型断言
• 增加前置校验：对请求参数、环境变量做非空检查，提前返回明确错误
• 流类型转换：用标准API完成Node流到Web流的转换，彻底解决类型不兼容问题
• 完善错误分支：针对不同异常场景返回对应状态码和提示信息

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