Outlook插件提示Office.js未加载、任务窗格空白问题咨询

问题根因 #

• 你同时配置了Office.initialize赋值和Office.onReady监听，二者存在执行逻辑冲突。
• React SPA的渲染时机早于Office.js初始化完成时机，首次加载无缓存时Office.js加载耗时更长，还未完成初始化就触发了React组件内的Office API调用，因此报加载未完成错误；第二次打开时Office.js已被浏览器缓存，加载速度快于React渲染，因此不会出现问题。

修复步骤 #

1. 删除手动赋值Office.initialize的代码行，官方目前已推荐优先使用Office.onReady做初始化监听，无需再单独配置Office.initialize空函数。
2. 将React应用的根渲染逻辑移入Office.onReady回调内，确保Office.js完全初始化完成后再渲染应用，从根源避免组件内调用Office API时依赖未就绪的问题，示例代码如下：

// 项目入口文件（通常为src/index.js）
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

Office.onReady(async (info) => {
  // 校验当前宿主为Outlook后再渲染应用
  if (info.host === Office.HostType.Outlook) {
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
    // 原有onReady回调内的其他业务逻辑可继续放在此处执行
  }
});

3. 如果仍偶现该问题，可以在所有调用Office API的组件逻辑外层增加就绪状态判断，避免异常调用。

配置校验 #

你当前的Office.js CDN引入方式、Azure App Service托管本身没有问题，无需额外修改配置，按上述步骤调整代码执行顺序即可解决全平台空白问题。

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