React Query中useMutation钩子的类型定义问题求助

你的猜测完全正确，问题根源就在.then(() => navigate('/login'))这一行：axios.post原本返回Promise<SuccessResponse>，但你在then中只执行了导航操作、没有返回任何值，导致整个mutation回调的返回类型变成了Promise<void | SuccessResponse>，和你指定的SuccessResponse泛型不匹配，从而触发类型错误。

以下是两种针对性的解决方案：

方案1：不需要获取成功响应数据时 #

如果注册成功后不需要使用接口返回的SuccessResponse数据，直接将useMutation的第一个泛型参数设为void即可：

type ErrorResponse = {
    response: {
        data: {
            message: string
        }
    }
}

type SuccessResponse = {
    message: string
}

const { mutate, isError, isLoading, error } = useMutation<
    void, // 改为void，匹配then无返回值的情况
    ErrorResponse,
    IUser
>(newUser =>
    axios
        .post<SuccessResponse>('http://localhost:3000/registration', newUser)
        .then(() => navigate('/login'))
)

注意给axios.post加上<SuccessResponse>泛型，明确接口的响应类型，避免axios默认的any类型。

方案2：需要保留成功响应数据时 #

如果之后要用到接口返回的message等数据，在then中返回响应的data字段，让回调函数的返回类型和SuccessResponse泛型匹配：

type ErrorResponse = {
    response: {
        data: {
            message: string
        }
    }
}

type SuccessResponse = {
    message: string
}

const { mutate, isError, isLoading, error, data } = useMutation<
    SuccessResponse, // 保持SuccessResponse
    ErrorResponse,
    IUser
>(newUser =>
    axios
        .post<SuccessResponse>('http://localhost:3000/registration', newUser)
        .then(res => {
            navigate('/login');
            return res.data; // 返回响应数据，确保返回类型为SuccessResponse
        })
)

此时data的类型就是SuccessResponse，可以直接使用data?.message这类属性。

补充：useMutation的泛型参数顺序是SuccessData, ErrorData, Variables，你的参数顺序是正确的，问题仅出在回调函数的返回值类型与第一个泛型不匹配。

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