```
const Home = () => {

const postsCollectionRef = collection(db, "data");
const [postList, setPostList] = useState([]);

useEffect(() => {
    const getPosts = async () => {
        const snapshot = await getDocs(postsCollectionRef);
        const data = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
        setPostList(data);
    };
    getPosts();
}, []);

    return (
    postList.forEach(post => {
        const example = post.data.Example;
        console.log(example);
        example.map((item) => {
            return <ExampleBlock
                A={item.A}
                B={item.B}
            />
        })
    })
    );
};

```

I was unable to consume the data i fetched from firestore. Attached with my data structure.

First, from the console log

```
console.log(postListArray);

```

it return the array successfully

Then, i tried to

```
console.log(postListArray.length);

```

it returned 0 (i believed it was 1, please point out my misunderstanding)

Then, i tried the code above

```
console.log(postListArray.data);

```

it returned undefined

Then, i tried to push my luck

```
console.log(postListArray.data.Example);

```

i believe it's type error

How can I access data inside the return object (if it had returned or not)?

data structure

[![](https://i.stack.imgur.com/acpuF.png)](https://i.stack.imgur.com/acpuF.png)

some attempts on console log

[![](https://i.stack.imgur.com/vu9Zm.png)](https://i.stack.imgur.com/vu9Zm.png)

type error?

[![](https://i.stack.imgur.com/qEpQg.jpg)](https://i.stack.imgur.com/qEpQg.jpg)

[updated console](https://i.stack.imgur.com/CCSum.png)