Объекты не являются допустимыми отображаемыми дочерними элементами в React, и попытка приведет к нарушению инварианта. Это чаще всего случается в моих проектах, когда мы случайно визуализируем объект Error (вместо error.message). Typescript знает, что Error не соответствует типу ReactNode, но он не предупреждает, когда я случайно передаю этот объект как дочерний элемент JSX IntrinsticElements (как в <b>{error}</b>) или иначе возвращаю его из render.
Можно ли заставить Typescript проверять типы отображаемых объектов, чтобы они расширяли ReactNode и, следовательно, могли успешно отображаться?
Для ясности, это связанный тип @types/react определения:
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
Смежный вопрос, не машинопись: Нарушение инварианта: объекты недопустимы как дочерний элемент React