Sanity/Remix中TypeScript类型不兼容问题求助：string|null无法赋值给string|undefined

问题核心 #

Sanity自动生成的类型会将字段标记为string | null（即便你在Schema中设置为必填），但Remix的类型校验期望string | undefined，两者类型不匹配触发报错。

可行解决方案 #

1. 手动修正生成的类型文件 #

找到sanity-typegen生成的类型文件（通常在src/sanity/types.ts路径下），将对应必填字段的null类型移除，直接设为string：

// 原生成的Person类型
interface Person {
  name: string | null;
}

// 修改后
interface Person {
  name: string; // 因Schema中已设为必填，直接定义为string类型
}

注意：每次重新执行npx sanity schema extract && npx sanity typegen generate后需要重复此操作，适合临时快速修复。

2. 用类型工具统一转换类型 #

创建类型转换工具，将null类型映射为undefined或直接断言为必填类型：

// 定义类型转换器
type NullToUndefined<T> = T extends null ? undefined : T;
type SanityDoc<T> = {
  [K in keyof T]: NullToUndefined<T[K]>;
};

// 使用时转换RoleGroup类型
const roleGroups: SanityDoc<RoleGroup>[] = await fetchRoleGroups();

或者在遍历数据时直接断言：

roleGroups.forEach((group) => {
  const validName = group.person.name as string; // 依赖Schema的必填设置，安全断言
});

3. 配置Sanity Typegen生成精准类型 #

在项目根目录创建sanity-typegen.json，配置强制必填字段不生成null类型：

{
  "generates": {
    "./src/sanity/types.ts": {
      "schema": "./schemas",
      "type": "typescript",
      "config": {
        "nonNullableFields": true
      }
    }
  }
}

之后重新执行类型生成命令：

npx sanity schema extract && npx sanity typegen generate

此方法一劳永逸，适合长期维护的项目。

4. 在Remix组件层做兼容处理 #

若不想修改生成的类型，可在组件接收Props时兼容类型：

interface RoleBlockProps {
  person: {
    name: string | undefined;
    image: string | undefined;
  };
}

export function RoleBlock({ person }: RoleBlockProps) {
  return <div>{person.name}</div>;
}

使用组件时将null转为undefined：

<RoleBlock person={{...person, name: person.name ?? undefined}} />

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