Discord.js模态框提交报错“出错请重试”问题求助

问题根源与修复步骤 #

1. CustomID拼写错误 #

你的模态框定义的自定义ID是verificationModal，但在模态框提交的判断逻辑里写成了verificationModel（把Modal拼成了Model），这直接导致提交事件没有被处理，Discord因超时返回"something went wrong"。

2. 必须响应模态框交互 #

所有Discord交互（包括模态框提交）都需要在3秒内进行响应（reply/deferReply），否则会触发错误。

3. 验证码答案的跨交互存储 #

原代码中captchaAnswer只在verify按钮的作用域内有效，模态框提交时无法获取。可以用内存对象临时存储用户的验证码答案（生产环境建议用数据库或Redis）。

修复后的完整代码 #

const { Events, EmbedBuilder, AttachmentBuilder, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder, ButtonBuilder, ButtonStyle} = require('discord.js');
const { Verification } = require('../models/verificationSchema')
const { Captcha } = require('captcha-canvas')

// 临时存储用户的验证码答案（生产环境建议用数据库/Redis）
const userCaptchas = new Map();

module.exports = {
    name: Events.InteractionCreate,
    async execute(interaction, client) {
        // 处理按钮交互
        if (interaction.isButton()){
            if (interaction.customId === 'verify') {
                await interaction.deferReply({ephemeral: true});
                
                const captcha = new Captcha();
                captcha.async = true;
                captcha.addDecoy();
                captcha.drawTrace();
                captcha.drawCaptcha();

                const captchaAnswer = captcha.text;
                // 将验证码答案和用户ID绑定存储
                userCaptchas.set(interaction.user.id, captchaAnswer);

                const captchaImage = new AttachmentBuilder()
                    .setFile(await captcha.png)
                    .setName('captcha.png')
                
                const captchaEmbed = new EmbedBuilder()
                    .setTitle('Verification Captcha')
                    .setColor('Yellow')
                    .setImage('attachment://captcha.png')
                    .setDescription(`Please enter the captcha text`)

                const captchaRow = new ActionRowBuilder()
                    .addComponents(
                        new ButtonBuilder()
                            .setLabel('Answer')
                            .setCustomId('answer')
                            .setStyle(ButtonStyle.Success)
                    )

                await interaction.editReply({embeds: [captchaEmbed], files: [captchaImage], components: [captchaRow]});
            } else if (interaction.customId === 'answer') {
                // 弹出模态框
                const modal = new ModalBuilder()
                    .setCustomId('verificationModal')
                    .setTitle('Verification Input')
                    .addComponents(
                        new ActionRowBuilder().addComponents(
                            new TextInputBuilder()
                                .setCustomId('captchaInput')
                                .setLabel("Enter the Captcha.")
                                .setStyle(TextInputStyle.Short)
                        )
                    );
                await interaction.showModal(modal);
            }
        }

        // 处理模态框提交
        if (interaction.isModalSubmit()) {
            if (interaction.customId === 'verificationModal') {
                // 先defer响应，避免超时
                await interaction.deferReply({ephemeral: true});
                
                const userInput = interaction.fields.getTextInputValue('captchaInput');
                const correctAnswer = userCaptchas.get(interaction.user.id);

                if (correctAnswer && userInput.toLowerCase() === correctAnswer.toLowerCase()) {
                    // 验证成功逻辑
                    await interaction.editReply({content: "验证成功！"});
                    // 验证成功后移除临时存储的验证码
                    userCaptchas.delete(interaction.user.id);
                } else {
                    // 验证失败逻辑
                    await interaction.editReply({content: "验证码错误，请重新尝试！"});
                }
            }
        }                                    
    }
}

关键修复说明 #

• 修正了verificationModal的拼写错误，确保模态框提交事件能被正确捕获。
• 新增userCaptchas Map存储用户的验证码答案，实现跨交互的状态传递。
• 模态框提交时调用deferReply确保响应超时，并添加了验证成功/失败的反馈逻辑。
• 验证成功后清理临时存储的验证码，避免内存冗余。

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