NestJS中Swagger泛型DTO扩展后响应结构显示异常问题

你的问题核心在于泛型DTO的Swagger注解配置错误，导致Swagger无法识别data字段的具体类型。以下是修正步骤：

1. 修正泛型DTO的类型定义和Swagger注解 #

首先调整ApiResponseWrapper的类型声明，同时移除硬编码的[Object]，改用Swagger提供的泛型支持方式：

import { ApiProperty, ApiExtraModels, getSchemaPath } from '@nestjs/swagger';
import { BaseResDto } from './base-res.dto';
import { VoucherDto } from './voucher.dto';

// 注册需要被Swagger识别的DTO类
@ApiExtraModels(VoucherDto)
export class ApiResponseWrapper<Some> extends BaseResDto {
  @ApiProperty({
    type: 'array',
    items: { $ref: getSchemaPath(Some) }, // 通过泛型引用具体DTO的Schema
  })
  data: Some[]; // 修正类型为泛型数组，原{ Some }为错误声明
}

2. 在控制器中明确指定泛型具体类型 #

在接口上使用ApiOkResponse合并泛型基类和具体的响应结构，让Swagger正确渲染：

import { Controller, Get, ApiOkResponse } from '@nestjs/common';
import { ApiResponseWrapper } from './api-response-wrapper.dto';
import { VoucherDto } from './voucher.dto';
import { getSchemaPath } from '@nestjs/swagger';

@Controller('vouchers')
export class VoucherController {
  @Get()
  @ApiOkResponse({
    schema: {
      allOf: [
        { $ref: getSchemaPath(ApiResponseWrapper) },
        {
          properties: {
            data: {
              type: 'array',
              items: { $ref: getSchemaPath(VoucherDto) },
            },
          },
        },
      ],
    },
  })
  getVouchers(): ApiResponseWrapper<VoucherDto> {
    // 模拟返回数据
    return {
      page: 1,
      totalPage: 10,
      data: [
        {
          name: 'test',
          expirationPeriodStart: new Date(),
          expirationPeriodEnd: new Date(),
        },
      ],
    };
  }
}

3. 关键说明 #

• @ApiExtraModels用于注册DTO类，确保getSchemaPath能获取到对应Schema路径
• allOf用于合并泛型基类和具体的data字段结构，解决Swagger无法自动解析泛型的问题
• 修正data的类型声明为Some[]，匹配你需要的数组结构

修改后Swagger即可正确显示包含VoucherDto完整结构的data数组。

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