添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

属性不存在于类型‘TypedResponse<从不>’..ts(2339)

内容来源于 Stack Overflow,遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持

腾讯云小微IT领域专用引擎提供翻译支持

原文
Stack Overflow用户 修改于2022-11-17
  • 该问题已被编辑
  • 提问者: Stack Overflow用户
  • 提问时间: 2022-11-17 16:09

我有一个服务器端数据加载程序,它从数据模型中检索用户ID,然后在这里检查用户ID是否确实存在:

export const loader = async ({ request, params }: LoaderArgs) => {
    const REQUESTED_USER = await GetUserById(Number(params.id))
    if (!REQUESTED_USER) {
         * If the provided url params user ID does not exist, we will handle it here
        return redirectWithError({
            request,
            message: `User ID: ${params.id} was not found; please enter a valid User ID`,
            logMessage: `User ID: ${params.id} was not found; please enter a valid User ID`,
            redirectTo: '/manager'
}

REQUESTED_USER返回:

const REQUESTED_USER: {
    id: number;
    company_name: string | null;
    avatar: string | null;
    brand: string | null;
    email: string;
    name: string | null;
    favicon: string | null;
} | null

在该块之后有代码执行一些数据操作,然后在一个类型化的JSON响应中返回数据:

if (GET_SELECTED_SERVICES) {
        sma = unwrap_sma[0]
         edr = unwrap_edr[0]
         cma = unwrap_cma[0]
         vms = unwrap_vms[0]
    return typedjson({
    })

之后,我将它传递给一个组件,以便在客户端作出反应:

export const ReadUser = ({ }) => {
    const LOADER = useTypedLoaderData<typeof loader>();
    const [CSRF] = useCSRF()
    return (
        <main className="flex w-full">
            <Form method="post" className="flex w-full">
                <input className="hidden" name={'csrf'} value={CSRF} type="text" readOnly />
                <Profile SMA={LOADER.sma} EDR={[]} VMS={[]} CMA={[]} />
            </Form>
        </main>
}

但是, Profile 组件上的属性正在抛出此错误:

Property 'sma' does not exist on type 'TypedResponse<never> | TypedJsonResponse<{ sma: TOptions[]; vms: TOptions[]; cma: TOptions[]; edr: TOptions[]; user: { id: number; company_name: string | null; ... 4 more ...; favicon: string | null; }; }>'.
  Property 'sma' does not exist on type 'TypedResponse<never>'.ts(2339)

我已经确定这是因为服务器端 REQUESTED_USER 函数中的初始 loader 保护,因此 LOADER 响应永远不会实现。我猜是吧?这是因为打字稿不理解要求的履行情况,而不是100%的理解(如果有人能解释的话)。

否则,我该如何解决这个问题呢?

LOADER 控件在 ReadUser 组件中的类型是:

const LOADER: TypedResponse<never> | TypedJsonResponse<{
    sma: TOptions[];
    vms: TOptions[];
    cma: TOptions[];
    edr: TOptions[];
    user: {