syncfusion tab 的 `selecting` 事件触发过早，导致 react-pdf 在 dom 尚未就绪时尝试渲染 base64 pdf，从而卡在 loading 状态；应改用 `selected` 事件，在内容真正挂载后加载文件。

在使用 Syncfusion Tab 组件集成 react-pdf 渲染 PDF 文件时，一个常见却隐蔽的问题是：PDF 始终停留在加载状态（如 或空白），即使服务端已成功返回 Base64 数据、控制台可正常打印 file 字符串。问题根源并非 react-pdf 本身，而是 Syncfusion Tab 的生命周期时机与 React 渲染阶段不匹配。

Syncfusion 提供两个关键事件：

• selecting：在切换 Tab 前 触发，此时目标 Tab 的 DOM 节点尚未插入文档，refetch() 虽然执行，但后续 Document 组件因父容器不可见/未挂载，无法正确初始化内部 Canvas 和 worker 流程；
• selected：在 Tab 切换完成、内容已渲染并挂载到 DOM 后触发——这才是安全发起数据请求和触发 PDF 渲染的正确时机。

✅ 正确做法：将 useQuery 的 enabled 控制逻辑从 selecting 移至 selected 事件中，并确保 file 状态更新后， 能在有效 DOM 上重新渲染。

以下是关键修复步骤与优化后的代码示例：

1. 修改 Tab 事件绑定，使用 selected

  {/* TabItemsDirective ... */}

2. 在 onTabSelected 中按需启用查询

const onTabSelected = (args: SelectEventArgs) => {
  const itemId = header[args.selectedIndex]?.id;
  if (itemId && isPdfType(header[args.selectedIndex].type)) {
    // ✅ 只在此刻启用查询，确保 DOM 已就绪
    queryClient.invalidateQueries(['facture', itemId]);
    // 若使用手动 refetch，也可在此调用 refetch()
  }
};

3. 重构 useQuery：移除副作用，交由事件驱动

// ❌ 错误：在 query 配置中直接调用 setFile（违反 React Hooks 规则，且时机不可控）
// ✅ 正确：纯数据获取，状态更新交由组件响应
const { data, isFetching, error } = useQuery(
  ['facture', id],
  () => getUniqueCassandraFile(id).then(res => res.rows[0].file),
  {
    enabled: false, // ⚠️ 默认禁用，由 selected 事件控制
    refetchOnWindowFocus: false,
  }
);

// 在组件内安全更新状态（例如 useEffect 监听 data 变化）
useEffect(() => {
  if (data) {
    setFile(data); // ✅ 安全更新，触发 renderPdf 重渲染
  }
}, [data]);

4. 优化 renderPdf：增强健壮性

export const renderPdf = (id: string, file?: string) => {
  if (!file) return Loading PDF...;

  return (
    
       console.log('PDF loaded successfully')}
        onLoadError={(err) => console.error('PDF load failed:', err)}
      >
        
      
    
  );
};

⚠️ 注意事项

• 避免 dangerouslySetInnerHTML + renderToStaticMarkup：你当前的 tabContent 使用了服务端渲染 API（ReactDOMServer.renderToStaticMarkup）将 React 元素转为 HTML 字符串，这会完全剥离 React 组件的交互能力与状态响应，导致 Document 无法挂载、useEffect 不执行、PDF 加载器永久阻塞。✅ 应改为直接返回 JSX（即 {switchRender(...)}），让 Tab 内容以客户端真实 React 组件形式运行。
• Base64 数据长度限制：确保后端返回的 Base64 字符串无换行、无空格，并通过 file.replace(/\s/g, '') 清洗，否则 react-pdf 会静默失败。
• 内存管理：切换 Tab 时建议清空 file 状态（如 setFile(undefined)），防止旧 PDF 占用内存或干扰新渲染。

通过以上调整，React-PDF 将在 Syncfusion Tab 的稳定 DOM 环境中启动加载流程，彻底解决“一直 loading”的问题，同时保持技术栈纯净（无需替换 react-pdf 或引入额外 PDF 渲染器）。