React：使打字稿根据另一个组件中的条件推断子类型

Question

我想编写一个组件，该组件仅在某些给定的 prop 不为 null 时才呈现其子级（例如，在获取一些数据时呈现加载器，并在获取完成时使用实际数据进行更新）。 这很简单：

import React, { ReactElement, ReactNode, useState } from 'react'

type TState = {
    data: {
        text: string
    } | null
}

type NotNullProps = {
    children: ReactNode
    state: TState
}

const NotNull = ({ children, state }: NotNullProps) => {
    if (!state.data) {
      return null
    }

    return <>{children}</>
}

现在，如果我想以这种方式使用这个组件怎么办？

const Example = () => {
    const [state] = useState<TState>({ data: null })

    return (
        <NotNull state={state}>
            <div>{state.data.text}</div> // <--- "Object is possibly 'null'."
        </NotNull>
    )
}

Typescript 正确地表明 state.data 可以为空，因为它无法推断 NotNull 中发生的事情，但 state.data 永远不会为空，因为 NotNull 会检查它。
我知道这可以通过渲染道具解决，但它们给代码添加了一些混乱。那么，有没有办法输入NotNull，这样打字稿就不会抱怨/可以推断出正在发生的事情？

这是一个可以尝试的游乐场：https://tsplay.dev/zwORWq

（是的，我知道Suspense 和其他东西，但它与这个问题无关。我只想知道是否有办法以打字稿可以推断出值不为空的方式键入这个组件（同样，没有渲染道具））。

Answer 1

您仍需检查state.data 是否为null，因为即使您的NotNull 组件阻止子组件渲染，您的代码仍将导致TypeError如果state.data 是null，则使用您的用法，因为代码中的state.data.text 行在解释时将产生TypeError: Cannot read property 'text' of null，无论孩子是否呈现。我建议将这些行更改为：

return (
    <NotNull state={state}>
        <div>{state.data && state.data.text}</div>
    </NotNull>
)

当然，这首先会否定NotNull 组件的需要，除了它还会阻止您的示例中的<div> 被呈现