Firebase returning insuficient or missing permission

I'm building an Instagram clone with Firebase and React JS I've a posts collection and inside it a comments collection and I'm trying to retrieve this comments but I'm getting insuficient or missing permission on console, I tried everything but I can't solve it.

Posts.js

import { useEffect, useState } from 'react'
import { db }  from '../firebase'

function Post(props) {
    const [comments, setComments] = useState(null)

    useEffect(() => {
        db.collection('post').doc(props.id).collection('comments').onSnapshot(function(snapshot) {                       
            setComments(snapshot.docs.map(function(document) {
                return {id: document.id, info: document.data()}                              
            }))
        })
    }, [props.id])  

    

    function postComments(id, e) {
        e.preventDefault()

        let actualComment = document.querySelector('#comment-'+id).value
        // alert(actualComment)

        db.collection('posts').doc(id).collection('comments').add({
            username: props.user,
            comment: actualComment,
        })
        // alert('Commentado!')
        document.querySelector('#comment-'+id).value = ''
    }

    return (
        <div className="post">
            <img src={props.info.image} alt=""/>
              <p><b><span>{props.info.username} </span></b><span>{props.info.description}</span></p>
              <div className='usersComments'>
                {
                    comments?.map(function(val) {
                        return (
                            <div>comentário</div>
                        )
                    })
                }
              </div>
              <form onSubmit={(e) => postComments(props.id, e)}>
                <textarea id={"comment-"+props.id}></textarea>
                <input type="submit" value="Comentar"/>
              </form>
        </div>
    )
}

export default Post

App.js

import './App.css';
import { useEffect, useState } from 'react';
import { auth, db } from './firebase'

import Header from './components/Header';
import Post from './components/Post';

function App() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([])

    useEffect(() => {
      auth.onAuthStateChanged(function(val) {
        setUser(val.displayName) 
      })

        db.collection('posts').orderBy('timeStamp', 'desc').onSnapshot((snapshot) => {
          setPosts(snapshot.docs.map(function(document) {
            return {id: document.id, info: document.data()}
          }))
        })
    }, [])

  return (
    <div className="App">
      <Header setUser={setUser} user={user}/>
      {
        posts.map(function(val) {
          return (
            <Post user={user} info={val.info} id={val.id} />
          )
        })
      }
    </div>
  );
}

export default App;

And here is my Firebase rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
        match /posts/{id} {
        allow read, write: if true;
    }
    match /posts/{id}/comments/{commentsId} {
    allow read, write: if true;
    }
  }
}

ERROR

Uncaught Error in snapshot listener: FirebaseError: Missing or insufficient permissions.