按Discord官方文档开发首个Activity遇frame_id参数未定义错误

问题概述 #

按照Discord官方首个Activity开发指南开发时，纯基础JS代码能正常显示Hello World，但引入Discord SDK后页面空白，控制台抛出错误："frame_id query param is not defined"。已确认CLIENT_ID配置正确、SDK安装导入正常，尝试直接传入Client ID、重装SDK等操作均无效。

报错原因 #

Discord嵌入式App SDK必须在Discord客户端的iframe环境中运行，frame_id参数是Discord客户端加载你的应用时自动附加的查询参数。直接在浏览器中访问本地开发服务器时，不存在该参数，导致SDK初始化失败，进而阻塞页面渲染。

解决方案 #

1. 必须通过Discord客户端打开应用 #

本地开发时，不能直接在浏览器访问localhost地址，需通过Discord客户端内的入口打开：

• 确保Discord开发者平台中你的应用已配置正确的重定向URI（比如http://localhost:5173，对应你的Vite开发端口）
• 进入Discord开发者平台的应用页面，切换到「嵌入式应用」标签，点击「测试嵌入式应用」，在Discord客户端中打开你的应用
• 或使用应用的邀请链接，在Discord客户端内打开

2. 添加环境判断避免页面空白 #

修改代码，先检查是否存在frame_id参数，仅在Discord环境中初始化SDK，避免直接访问时页面异常：

// Import the SDK
import { DiscordSDK } from "@discord/embedded-app-sdk";

import "./style.css";
import rocketLogo from '/rocket.png';

// 优先渲染页面内容，避免SDK初始化失败导致空白
document.querySelector('#app').innerHTML = `
  <div>
    <img src="${rocketLogo}" class="logo" alt="Discord" />
    <h1>Hello, World!</h1>
  </div>
`;

// 检查是否处于Discord嵌入式环境
const urlParams = new URLSearchParams(window.location.search);
const frameId = urlParams.get('frame_id');

if (frameId) {
  // 仅在Discord环境中初始化SDK
  const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);
  
  setupDiscordSdk().then(() => {
    console.log("Discord SDK is ready");
  });
  
  async function setupDiscordSdk() {
    await discordSdk.ready();
  }
} else {
  console.log("请在Discord客户端中打开此应用以使用完整功能");
}

验证步骤 #

1. 启动本地开发服务器（比如执行npm run dev）
2. 打开Discord开发者平台，进入你的应用的「嵌入式应用」页面，点击「测试嵌入式应用」
3. 在Discord客户端中加载应用后，页面应正常显示Hello World，控制台输出"Discord SDK is ready"，无报错

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