“TypedResponse”类型上不存在属性<never> '.ts(2339)</never>

Question

我有一个服务器端数据加载器，它从数据 model 中检索用户 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({
        sma,
        vms,
        cma,
        edr,
        user
    })

之后我将它传递给客户端的 React 组件：

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)

我确定这是因为服务器端loader function 中的初始REQUESTED_USER守卫，因此LOADER响应永远不会实现。 我假设？ 这是由于 Typescript 不理解请求的实现，但不是 100%（如果有人可以对此进行说明）。

否则，我如何解决此问题 go？

ReadUser组件中LOADER const 的类型是：

const LOADER: TypedResponse<never> | TypedJsonResponse<{
    sma: TOptions[];
    vms: TOptions[];
    cma: TOptions[];
    edr: TOptions[];
    user: {
        id: number;
        company_name: string | null;
        ... 4 more ...;
        favicon: string | null;
    };
}>

我确实尝试将!REQUESTED_USER参数更改为REQUESTED_USER === null并且没有任何改变

Answer 1

我假设您的加载程序可以返回类型A = {x:1}和B = {y:2} ，这会导致 union A | B A | B类型为typeof loader 。 如果你尝试访问LOADER.x ts 会报错，因为LOADER可以是B类型并且它上面没有属性x ，反之亦然。

由于类型是根据您实际返回的内容正确推断出来的，并且没有很好的方法来区分union 或 case ，您只能手动分配类型useTypedLoaderData() as A或抛出重定向，这将从 union 中删除第一个返回类型并且似乎也适用于混音 - throw redirect('/somewhere')