React Router Dom中defer加载数据的TypeScript类型报错求助

核心错误分析 #

你遇到的TypeScript错误有两个关键原因：

1. Await组件的渲染函数必须返回ReactNode：当前函数仅执行console.log，返回void，不符合组件要求。
2. 渲染函数的参数结构错误：data.postResponse是一个解析后为GetPosts类型的Promise，而非包含postResponse属性的对象，无需解构包裹。

修正后的代码 #

1. 保留原loader函数（类型无需修改）

export const listPageLoader: LoaderFunction = async ({ request }) => {
  const query = request.url.split("?")[1];
  const postPromise: Promise<GetPosts> = apiRequest("/posts?" + query);
  return defer({
    postResponse: postPromise,
  });  
};

2. 修正Await组件的使用

<Suspense fallback={<p>Loading...</p>}>
  <Await
    resolve={data.postResponse}
    errorElement={<p>Error loading posts!</p>}
  >
    {(postResponse: GetPosts) => {
      console.log(postResponse);
      // 必须返回React可渲染元素，示例为渲染帖子列表
      return (
        <div className="post-list">
          {postResponse.map(post => (
            <article key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.content}</p>
            </article>
          ))}
        </div>
      );
    }}
  </Await>
</Suspense>

额外说明 #

• 若你确实需要将数据包裹在对象中返回，需修改loader函数，让Promise解析为包含postResponse的对象：

  // 修改loader中的postPromise定义
  const postPromise: Promise<{ postResponse: GetPosts }> = apiRequest("/posts?" + query)
    .then(data => ({ postResponse: data }));
  

  此时渲染函数的解构写法才是正确的，但这种写法通常没必要，直接返回原始数据更简洁。

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