Next.js+Sanity项目[slug].tsx报Post用作类型错误如何解决

两个核心问题触发该类型错误：

1. 命名冲突：当前页面导出的组件函数命名为Post，和typings.d.ts中定义的Post接口重名。TS解析时会优先将Post识别为组件函数（属于运行时值，而非类型），因此抛出"值被用作类型"的错误。
2. 类型未导入：[slug].tsx中未导入typings.d.ts里导出的Post、Comment类型，TS无法找到对应的类型定义。

额外误区说明：类型声明文件不需要修改为.tsx后缀，保持.d.ts后缀即可，该后缀是TS官方约定的类型声明文件格式，修改为.tsx反而会干扰正常的类型识别逻辑。替换为typeof Post无效的原因是，该写法获取的是Post组件函数的类型，并非文章数据结构的类型，自然会出现属性访问的类型警告。

• 第一步：在[slug].tsx文件顶部添加类型导入，使用TS的类型导入语法避免和运行时值混淆：

import type { Post, Comment } from '../../typings' // 路径根据实际typings.d.ts的存放位置调整

• 第二步：解决命名冲突，二选一即可：
  • 推荐方案：修改页面组件名称，避免和类型重名，将原代码中export default function Post({ post }: Props)修改为export default function PostPage({ post }: Props)
  • 备选方案：导入类型时设置别名，将导入语句改为import type { Post as PostType, Comment } from '../../typings'，后续所有使用Post做类型标注的位置（Props接口、getStaticPaths的map回调参数）全部替换为PostType
• 第三步：修正typings.d.ts中的类型定义错误：原Post接口中body: [object]写法不合法，若使用PortableText渲染富文本，可先临时修改为body: any[]，后续引入@portabletext/types包后再替换为标准的PortableTextBlock[]类型即可。

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