React+Autodesk Viewer项目Document.js:54遍历未定义属性错误求助

1. 确认Viewer脚本加载时机 #

• 确保Autodesk Viewer的脚本是完全加载完成后再初始化Document对象。React组件中不要在useEffect的同步代码里直接实例化，建议用回调监听脚本加载状态，比如：

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js';
    script.onload = () => {
      // 这里再执行Document初始化逻辑
      const document = new Autodesk.Viewing.Document(...);
    };
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);
  

• 如果项目里是通过npm包引入的Viewer，确认包的版本是否有隐性更新，执行npm list @types/autodesk-viewing查看版本，对比之前正常运行时的版本，回退到旧版本测试：

  npm install @types/autodesk-viewing@<之前的版本号>
  

2. 检查文档加载的参数正确性 #

• 确认传入Autodesk.Viewing.Document.load()的URN是否有效，且已经完成翻译处理。可以通过Model Derivative API验证URN的状态：

  // 示例：调用API检查URN状态
  fetch(`https://developer.api.autodesk.com/modelderivative/v2/designdata/${URN}/manifest`, {
    headers: { 'Authorization': `Bearer ${accessToken}` }
  })
  .then(res => res.json())
  .then(data => console.log(data.status)); // 确保状态为"success"
  

• 检查accessToken的权限是否包含viewables:read，且token未过期。

3. 修复Document初始化的逻辑问题 #

• 查看Document.js第54行的代码，确认调用traverse的对象是什么。通常这个对象是文档的根节点，可能是加载文档时返回的结果未正确解析。修改onSuccess回调的逻辑，确保拿到有效的文档对象：

  Autodesk.Viewing.Document.load(
    urn,
    (doc) => {
      // 先验证doc是否存在，且包含根节点
      const rootItem = doc.getRootItem();
      if (!rootItem) {
        console.error('文档无有效根节点');
        return;
      }
      // 再执行traverse操作
      rootItem.traverse(...);
    },
    (err) => console.error(err)
  );
  

4. 清理缓存与依赖重装 #

• 清理项目的node_modules和缓存，重新安装依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 清理浏览器的本地存储和缓存，避免旧的Viewer脚本缓存导致冲突。

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