The React typings allow passing an object as a child, but doing so results in a runtime error thrown by React with the message "Objects are not valid as a React child".

I'm guessing this is due to the wide variety of things that are valid react children, specific functions for render props, but I'm wondering if there is a way to refine the type definition to get this (passing an object as a child) to be an error.

I've unfortunately run into this a bunch when working with nested objects and accidentally not traversing deep enough into the object when trying to display data, e.g. user.address.street where street is, in fact, an object, and thus will throw an error.

The following is a minimal reproduction that demonstrates the issue, specifically in that the types permit this, rather than resulting in a compile error. Also capture in this CodeSandbox:

import * as React from "react";
import { render } from "react-dom";

const App = () => {
  const data = { user: { name: "Chris" } };

  // The following throws a runtime error from React
  // "Objects are not valid as a React child"
  // Ideally this would be caught at compile time
  return <p>{data}</p>;
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

• I tried using the @types/react package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @Jessidhia, @eps1lon