首页
/ Remix框架中useFetcher/useLoaderData类型问题解析

Remix框架中useFetcher/useLoaderData类型问题解析

2025-05-04 18:13:14作者:傅爽业Veleda

在Remix框架2.9.1版本中,开发者遇到了一个关于useFetcheruseLoaderData钩子类型系统的变化问题。这个问题主要影响TypeScript用户,特别是那些在项目中使用了单次获取(Single Fetch)功能的开发者。

问题现象

在Remix 2.8及更早版本中,开发者可以这样使用类型注解:

const data = useLoaderData<{name: string}>();
const fetcher = useFetcher<{name: string}>();

这种方式允许开发者直接指定期望的数据结构类型。然而,在2.9.1版本中,这种用法会导致类型被推断为never,除非传入的类型是一个函数类型。

技术背景

这个变化源于Remix对单次获取功能的改进。单次获取是Remix的一项优化功能,它使用turbo-stream库来处理数据序列化。这个库有特定的类型序列化规则,只能处理某些特定类型的数据结构。

为了在编译时而非运行时捕获类型错误,Remix团队更新了类型系统。现在,如果传入的类型不是有效的加载器(loader)或动作(action)函数类型,系统会返回never类型,这是一种TypeScript中表示"永远不会发生"的特殊类型。

解决方案

正确的使用方式应该是:

// 对于加载器数据
const loaderData = useLoaderData<typeof loader>();

// 对于动作数据
const actionData = useActionData<typeof action>();

// 对于fetcher
const fetcher = useFetcher<typeof loader | typeof action>();

这种写法确保了类型安全,因为它直接引用了实际加载器或动作函数的返回类型。

向后兼容方案

如果项目中确实需要保留原有的直接指定类型的方式,可以使用类型断言:

const data = useLoaderData() as {name: string};

不过,这种方式会绕过类型检查,建议仅在必要时使用。

最佳实践

  1. 始终使用typeof loader:这是最类型安全的方式,能确保数据结构和实际返回类型一致。

  2. 避免直接指定对象类型:虽然看起来方便,但会失去类型安全性。

  3. 理解单次获取的限制turbo-stream无法序列化自定义类实例等复杂对象,这些限制现在会在编译时被捕获。

  4. 检查项目配置:确保没有意外包含single-fetch.d.ts文件,除非确实需要使用单次获取功能。

总结

Remix 2.9.1对类型系统的这一改进,虽然短期内可能带来一些迁移成本,但从长远看提高了类型安全性,特别是对于使用单次获取功能的项目。开发者应该适应这种更严格的类型检查方式,它能在编译阶段就发现潜在的数据序列化问题,避免运行时错误。

对于现有项目,建议逐步迁移到使用typeof loader的写法,这是Remix团队推荐的、最符合框架设计理念的类型使用方式。

登录后查看全文

热门内容推荐

项目优选

收起
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
14
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
103
184
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
462
378
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
55
126
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
278
507
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
88
246
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
348
246
MateChatMateChat
前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。 官网地址:https://matechat.gitcode.com
682
83
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
90
69
arkanalyzerarkanalyzer
方舟分析器:面向ArkTS语言的静态程序分析框架
TypeScript
29
37