Ошибка Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode. Что я делаю не так?

Question

[Айнур Ярулин]

Здравствуйте, не знаю является ли эта ошибка React'а или Next'а.
Когда я пытаюсь использовать асинхронный компонент, то я получаю ошибку.

// app/posts/[slug]/page.tsx

async function Post ({ postId }: { postId: string }) {
  const post = await fetch(`http://.../posts/${postId}`).then((res) => res.json())

  return <div>...<div/>
}


export default function Page({ params }: { params: { slug: string } }) {
  const { slug} = params
  return (
    <Box>
      <Post postId={slug}/>
    </Box>
  )
}

Ошибка в консоли:
// Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(...)`, expected a ReactNode.

Если функция Post не асинхронная, то никаких ошибок не будет, но тогда я не смогу использовать await в коде

Answer 1

[Aetae]

React так не умеет. Сам механизм react делает такое невозможным.
Все компоненты синхронны(кроме lazy, но это совсем другое).
Ты должен свою асинхронную функцию вызвать в useEffect, а пока она грузится показывать какой-нить лоадер.

Comments

[Aetae]

Суде по всему так умеет next.js для SSR компонентов, которые не используют хуков. Херотень ещё та.:)
Понятно конечно как оно может работать без хуков, но нахрена они это сделали непонятно - только запутает всё нафиг.

Answer 2

[Айнур Ярулин]

Решил проблему. Причина была в компонентах MUI. Нужно было добавить тег div между компонентами MUI и Post

export default function Page({ params }: { params: { slug: string } }) {
  const { slug} = params
  return (
    <Box>
      <div>
        <Post postId={slug}/>
      </div>
    </Box>
  )
}