使用discord.js v14.25.1新模态API时ModalBuilder报错‘Received one or more errors’

我正在用discord.js v14.25.1开发Discord机器人的第一个模态框，按照最新文档里的LabelBuilder、addLabelComponents、addTextInputComponents等新API编写——文档说明setLabel()和传统ActionRow系统已废弃，所以采用了这个“面向未来”的模态API，但执行命令时持续报错：

❌ | Error during Error when occured this command join
        Received one or more errors
        Stack:
Error: Received one or more errors
    at handleIgnoreStrategy (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:2136:74)
    at parse (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:972:90)
    at toJSON (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/@discordjs/builders/dist/index.js:1759:20)
    at map (native:1:11)
    at toJSON (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/@discordjs/builders/dist/index.js:2857:35)
    at showModal (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/discord.js/src/structures/interfaces/InteractionResponses.js:402:46)
    at showModal (/Users/raphael/Documents/projets/discord_bots/tty/node_modules/discord.js/src/structures/interfaces/InteractionResponses.js:397:19)
    at execute (/Users/raphael/Documents/projets/discord_bots/tty/src/commands/administration/join.ts:48:21)
    at execute (/Users/raphael/Documents/projets/discord_bots/tty/src/commands/administration/join.ts:20:16)

我明白是shapeshift在JSON验证环节拒绝了该模态框，但无法定位新API中的问题所在。以下是我的代码示例：

import {
    LabelBuilder,
    SlashCommandBuilder,
} from '@discordjs/builders';
import {
    ModalBuilder,
    ActionRowBuilder,
    CommandInteraction,
    TextInputBuilder,
    TextInputStyle,
    ComponentType,
} from 'discord.js';


export default {
    data: new SlashCommandBuilder()
        .setName('join')
        .setDescription('test'),

    async execute(interaction: CommandInteraction) {
        const favoriteColorInput: TextInputBuilder = new TextInputBuilder({
            custom_id: "favoriteColorInput",
            style: TextInputStyle.Short,
        });
        const hobbiesInput: TextInputBuilder = new TextInputBuilder({
            custom_id: "hobbiesInput",
            style: TextInputStyle.Paragraph,
        });

        const favoriteColorLabel: LabelBuilder = new LabelBuilder({
            label: "What's your favorite color?",
            type: ComponentType.Label,
        })
        .setTextInputComponent(favoriteColorInput);
        const hobbiesLabel: LabelBuilder = new LabelBuilder({
            label: "What are your hobbies?",
            type: ComponentType.Label,
        })
        .setTextInputComponent(hobbiesInput);


        
        const modal: ModalBuilder = new ModalBuilder({
            custom_id: 'myModal',
            title: 'My Modal',
        })
        .addLabelComponents(favoriteColorLabel, hobbiesLabel);
        await interaction.showModal(modal);
    },
};

问题分析与修正方案 #

报错根源在于LabelBuilder的错误使用方式，当前v14.25.1的新模态API中，LabelBuilder的用法并非你代码中那样，且文本输入框有必填属性未设置。正确的实现方式如下：

import {
    SlashCommandBuilder,
} from '@discordjs/builders';
import {
    ModalBuilder,
    ActionRowBuilder,
    CommandInteraction,
    TextInputBuilder,
    TextInputStyle,
} from 'discord.js';


export default {
    data: new SlashCommandBuilder()
        .setName('join')
        .setDescription('test'),

    async execute(interaction: CommandInteraction) {
        // 直接在TextInputBuilder中设置label等核心属性
        const favoriteColorInput = new TextInputBuilder()
            .setCustomId('favoriteColorInput')
            .setLabel("What's your favorite color?")
            .setStyle(TextInputStyle.Short)
            .setRequired(true); // 可选，设置是否必填

        const hobbiesInput = new TextInputBuilder()
            .setCustomId('hobbiesInput')
            .setLabel("What are your hobbies?")
            .setStyle(TextInputStyle.Paragraph)
            .setRequired(false);

        // 每个文本输入框必须放在独立的ActionRow里
        const firstRow = new ActionRowBuilder<TextInputBuilder>().addComponents(favoriteColorInput);
        const secondRow = new ActionRowBuilder<TextInputBuilder>().addComponents(hobbiesInput);

        const modal = new ModalBuilder()
            .setCustomId('myModal')
            .setTitle('My Modal')
            .addComponents(firstRow, secondRow);

        await interaction.showModal(modal);
    },
};

关键修正点：

• 移除错误的LabelBuilder调用，直接给TextInputBuilder设置label属性（这才是当前API的正确用法）
• 每个文本输入框必须包裹在独立的ActionRowBuilder中
• 补充TextInputBuilder的必填属性，避免触发shapeshift的验证错误
• 改用addComponents添加ActionRow，替代废弃的addLabelComponents

内容的提问来源于stack exchange，提问作者Raphaël