使用useState更新本地状态时出现TypeScript类型不兼容错误

问题场景 #

你在组件中通过useState声明消息数组：

const [localMessages, setLocalMessages] = useState<Message[]>([])

当通过查询获取消息并更新localMessages时：

setLocalMessages((prevState) => {
  return [...prevState, ...data.getMessagesForConversation.messages]
})

触发了TypeScript类型错误：

Type '{ __typename?: "Message" | undefined; uuid: string; content: string; updatedAt: string; createdAt: string; type: string; src?: string | null | undefined; deleted: boolean; sender: { __typename?: "Profile" | undefined; uuid: string; username: string; }; }' is not assignable to type 'Message'.
          Types of property 'sender' are incompatible.
            Type '{ __typename?: "Profile" | undefined; uuid: string; username: string; }' is missing the following properties from type 'Profile': updatedAt, createdAt, user, friends, friendshipRequests

问题原因 #

你的Message类型定义中，sender字段要求是完整的Profile类型，但GraphQL查询返回的消息对象里，sender只包含uuid和username两个字段，缺少Profile类型要求的其他属性，导致类型不兼容。

解决方案 #

不需要修改useState的声明，核心是让类型定义和实际返回的数据匹配，有三种可选方案：

方案1：调整类型定义（推荐，适合不需要完整Profile字段的场景） #

创建一个简化版的Profile类型，或者直接修改Message中的sender类型：

// 定义简化的Profile类型
export type PartialProfile = {
  __typename?: 'Profile';
  uuid: Scalars['String'];
  username: Scalars['String'];
};

// 更新Message类型的sender字段
export type Message = {
  __typename?: 'Message';
  uuid: Scalars['String'];
  sender: PartialProfile;
  content: Scalars['String'];
  updatedAt: Scalars['String'];
  createdAt: Scalars['String'];
};

方案2：调整GraphQL查询（适合需要完整Profile字段的场景） #

修改你的查询语句，让它返回Profile类型要求的所有字段（updatedAt、createdAt、user、friends、friendshipRequests），这样返回的sender就会符合Profile类型的要求，错误自动消失。

方案3：类型断言（临时 workaround，不推荐） #

如果暂时无法修改类型或查询，可以用类型断言绕过TypeScript检查，但这会隐藏潜在的类型问题：

setLocalMessages((prevState) => {
  return [...prevState, ...(data.getMessagesForConversation.messages as unknown as Message[])]
})

内容的提问来源于stack exchange，提问作者Frisbetarian-Support Palestine