Remix.run中useLoaderData返回any类型，类型推断失效问题排查

我在尝试使用Remix.run框架时遇到类型推断异常问题：官方示例中使用const data = useLoaderData()可自动推断数据类型，但我的代码中，即便使用useLoaderData<typeof loader>()，变量users仍被识别为any类型，VSCode中map方法里的参数u还出现红线报错。

代码示例 #

import { json } from "@remix-run/node";
import type { LoaderFunction, LoaderArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getUsers } from "~/models/users.server";

export const loader: LoaderFunction = async (args: LoaderArgs) => {
  const users = await getUsers();
  return json({ users: users });
};

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  return (
    <div>
      {users.map((u) => (
        <p key={u.id}>{u.username}</p>
      ))}
    </div>
  );
}

依赖版本 #

{
  "@remix-run/css-bundle": "^1.16.0",
  "@remix-run/node": "^1.16.0",
  "@remix-run/react": "^1.16.0",
  "@remix-run/serve": "^1.16.0"
}

核心原因1：LoaderFunction未指定泛型 #

你使用的LoaderFunction是无泛型的基础类型，无法自动推断loader返回值的具体结构，导致useLoaderData<typeof loader>无法获取正确的类型信息，最终users被推断为any。

核心原因2：getUsers返回类型不明确 #

如果getUsers函数没有定义清晰的返回类型（比如Promise<User[]>），TypeScript无法推断出users的具体字段结构，会直接打断整个类型推断链。

修复步骤 #

1. 定义用户类型并给LoaderFunction指定泛型
   先明确用户数据的结构，再给loader指定返回值类型：

   // 先定义用户数据类型
   type User = {
     id: string | number;
     username: string;
     // 根据实际业务补充其他字段
   };
   
   // 给LoaderFunction指定返回值泛型
   export const loader: LoaderFunction<{ users: User[] }> = async (args: LoaderArgs) => {
     const users = await getUsers();
     return json({ users: users });
   };
   

2. 给getUsers明确返回类型
   在~/models/users.server.ts中补充函数的返回类型声明：

   export async function getUsers(): Promise<User[]> {
     // 你的数据库查询逻辑
     return db.users.findMany(); // 若使用ORM，确保ORM自身返回类型正确
   }
   

3. 简化useLoaderData的使用
   Remix 1.16版本已支持自动关联loader与组件的类型，只要loader类型定义正确，直接使用useLoaderData()即可自动推断类型：

   export default function Users() {
     const { users } = useLoaderData(); // 此时users会被自动推断为User[]类型
     return (
       <div>
         {users.map((u) => (
           <p key={u.id}>{u.username}</p>
         ))}
       </div>
     );
   }
   

额外注意点 #

• 确保tsconfig.json中开启strict模式（至少开启strictNullChecks），否则TypeScript的类型推断能力会大幅下降。
• 若修复后VSCode仍报错，可尝试重启TypeScript语言服务（快捷键Ctrl+Shift+P，选择"Restart TypeScript Server"），缓存问题也可能导致类型不更新。

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