SPFx Web Part获取组数据异常：控制台有输出但页面显示undefined

你的代码存在几个根本性问题，导致getGroupData无法正确返回值：

• 未返回异步操作的Promise链：getGroupData标记为async方法，但内部没有返回Graph请求的异步操作结果，方法执行完成时直接返回undefined，await自然拿不到有效数据。
• 变量处理错误：
  • stringToReturn未初始化为空字符串，默认是undefined；
  • 循环中每次赋值会覆盖之前的内容，最后只能得到最后一个成员的邮箱，而非所有成员的邮箱列表。
• 异步错误未捕获：Graph API请求的错误在回调函数内部，外层的try/catch无法捕获这些错误，出错时也无法返回错误信息。
• 混用异步写法：async方法里混用.then回调，既不利于代码可读性，也容易导致异步流程失控。

修正后的代码示例： #

public async render(): Promise<void> {
  const groupMembers = await this.getGroupData();
  this.domElement.innerHTML = `
    <section>
      <div>
        Meet the Team...
      </div>
      <div>
        ${groupMembers}
      </div>
    </section>`;
}

protected async getGroupData(): Promise<string> {
  let stringToReturn = ""; // 初始化空字符串
  try {
    // 用await替代.then，统一async/await写法
    const client = await this.context.msGraphClientFactory.getClient('3');
    const response = await client.api('groups/<GUID>/members').get();
    const members: MicrosoftGraph.User[] = response.value;

    // 累加所有成员邮箱，而非覆盖
    for (const memberDetail of members) {
      console.log('memberDetail.mail:' + memberDetail.mail);
      stringToReturn += memberDetail.mail + "<br>";
    }
  } catch (e) {
    // 捕获所有异步错误
    stringToReturn = (e as Error).message.toString();
  }
  // 必须返回最终拼接好的字符串
  return stringToReturn;
}

修正要点说明：

1. 在render方法中先await获取结果，再插入到innerHTML，避免模板字符串中直接await的潜在问题（分开写更清晰）；
2. getGroupData中用await处理msGraphClientFactory.getClient和Graph API请求，确保异步操作完成后再继续执行；
3. 初始化stringToReturn为空字符串，循环中用+=累加所有成员邮箱；
4. 所有异步操作的错误都能被外层try/catch捕获；
5. 方法末尾明确返回stringToReturn。

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