如何解决Discord.js选择菜单选中后返回占位符的问题？

问题本质是：编辑包含选择菜单的消息时，没有显式指定菜单的选中项，导致Discord渲染时回到初始占位符状态。普通回复正常是因为回复时Discord会自动保留选中状态，但编辑消息需要手动配置。

核心解决方法 #

编辑消息前，重新构建选择菜单组件，给用户选中的选项设置default: true，或者直接给菜单设置defaultValue属性，明确标记当前选中项。

代码示例 #

1. 发送初始选择菜单消息

const { ActionRowBuilder, StringSelectMenuBuilder } = require('discord.js');

// 构建初始选择菜单
const initialSelect = new StringSelectMenuBuilder()
  .setCustomId('role-picker')
  .setPlaceholder('Make a selection')
  .addOptions([
    { label: 'Admin', value: 'admin_role' },
    { label: 'Moderator', value: 'mod_role' },
    { label: 'Member', value: 'member_role' }
  ]);

const row = new ActionRowBuilder().addComponents(initialSelect);
// 发送初始消息
await interaction.reply({ content: 'Choose a role:', components: [row] });

2. 处理交互并编辑消息（保留选中状态）

client.on('interactionCreate', async interaction => {
  if (!interaction.isStringSelectMenu() || interaction.customId !== 'role-picker') return;

  // 获取用户选中的选项值
  const selected = interaction.values[0];

  // 重新构建菜单，标记选中项
  const updatedSelect = new StringSelectMenuBuilder()
    .setCustomId('role-picker')
    .setPlaceholder('Make a selection')
    .addOptions([
      { label: 'Admin', value: 'admin_role', default: selected === 'admin_role' },
      { label: 'Moderator', value: 'mod_role', default: selected === 'mod_role' },
      { label: 'Member', value: 'member_role', default: selected === 'member_role' }
    ]);

  const updatedRow = new ActionRowBuilder().addComponents(updatedSelect);

  // 编辑原消息，替换为带选中状态的菜单
  await interaction.update({
    content: `Selected role: ${selected.split('_')[0]}`,
    components: [updatedRow]
  });
});

补充说明 #

• 若是多选菜单，只需将defaultValue设为选中值的数组，比如defaultValue: interaction.values，或者给每个选中的选项设置default: true
• 不能直接复用初始的菜单组件，必须重新构建并显式标记选中状态，否则编辑后Discord会使用无选中标记的初始配置

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