How to fetch the bio from author section to post in a blog?

The issue you're encountering is because the bio field in your author schema is likely defined as a Portable Text (block content) field, not a simple string. When you fetch it with "bio": author->bio, you're getting an array of block objects, and React is throwing that error because it doesn't know how to render that array directly.

Here's how to fix it:

Solution 1: Render with @portabletext/react (Recommended)

Install the Portable Text renderer:

npm install @portabletext/react

Then use it to render the bio:

import {PortableText} from '@portabletext/react'

// In your component
{postData.bio && <PortableText value={postData.bio} />}

This will properly render the rich text content with all its formatting.

Solution 2: Fetch Plain Text Only

If you just want the plain text without formatting, modify your GROQ query to use the pt::text() function:

sanityClient.fetch(
  `*[slug.current == $slug]{
    title,
    slug,
    publishedAt,
    mainImage{
      asset->{
        _id,
        url
      }
    },
    body,
    "name": author->name,
    "authorImage": author->image,
    "bio": pt::text(author->bio),
  }`,
  { slug }
)

Then you can display it normally:

{postData.bio}

Why This Happens

Portable Text fields store content as an array of block objects (like [{_type: 'block', children: [...]}]), not as simple strings. This structure allows for rich formatting, links, and custom blocks. React sees this array and doesn't know how to render it, hence the error message about using an array.

The @portabletext/react library knows how to traverse this structure and render it properly as HTML elements. If you only need plain text, the pt::text() function in your query extracts just the text content without the structure.