TypeScript中使用React Suspense如何处理Promise类型报错

你对React Suspense的数据加载机制存在理解偏差，核心错误点如下：

• Suspense边界的触发条件是组件渲染阶段抛出Promise，而非组件内部返回Promise类型的值。直接将异步请求返回的Promise赋值给渲染变量，既不会触发Suspense的fallback逻辑，还会因为拿到的是Promise实例而非最终数据，触发TS类型错误和运行时错误。
• 示例中fetch('some-api').json()本身存在语法错误：fetch返回值是Promise<Response>，不等待resolve就直接调用.json()自然会报.json is not a function，这个错误和Suspense本身无关。
• React核心库没有提供开箱即用的Suspense数据请求能力，不能直接把普通异步函数丢在组件里就指望Suspense自动处理加载状态。

首先实现一个TS类型友好的Suspense Promise包装工具，核心逻辑是维护请求的三种状态，在请求未完成时抛出Promise供Suspense边界捕获：

function wrapPromise<T>(promise: Promise<T>) {
  let status: 'pending' | 'success' | 'error' = 'pending';
  let response: T;
  let error: Error;

  const suspender = promise.then(
    (res) => {
      status = 'success';
      response = res;
    },
    (err) => {
      status = 'error';
      error = err instanceof Error ? err : new Error(String(err));
    }
  );

  return {
    read(): T {
      switch (status) {
        case 'pending':
          throw suspender;
        case 'error':
          throw error;
        default:
          return response;
      }
    }
  };
}

使用时注意不要在组件渲染函数内部重复创建包装实例，否则每次重渲染都会重置请求状态，导致加载状态无限循环。基础用法示例：

// 提前初始化请求资源，可根据业务场景放到路由层、状态管理层做缓存
// 注意fetchData需要返回正确的Promise，比如封装fetch时要提前链式调用.json()
const fetchData = () => fetch('some-api').then(res => res.json() as Promise<MyData[]>);
const dataResource = wrapPromise(fetchData());

function Parent() {
  return (
    <Suspense fallback={<Spinner />}>
      <Child />
    </Suspense>
  );
}

function Child() {
  // read()要么抛出Promise/错误，要么返回类型正确的最终数据，TS可自动推导类型为MyData[]
  const data = dataResource.read();
  return (
    <div>
      {data.map(d => <p key={d.id}>{d.name}</p>)}
    </div>
  );
}

• 上述方案兼容React 18及以上正式版本，不需要开启任何实验性特性。
• 请求失败时read()会抛出错误，需要搭配上层错误边界（Error Boundary）组件捕获处理，避免应用白屏。
• 如果需要根据组件props、状态动态发起请求，可以将resource存在组件state或ref中，触发请求时更新resource实例即可，不要在渲染函数内同步创建新的包装实例。
• Suspense模式下不要在子组件渲染函数中写async/await逻辑：渲染函数是同步执行的，await会阻断正常渲染流程，不符合Suspense的设计逻辑。

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