Retrieveing data from firestore based on url

Question

I am trying to render the profile page using data I get from firestore based on URL content. For example when a user types mywebsite/profile/someusername I would like to retrieve profile info from firestore database and render the Profile component. I have a redux store that keeps the state of the App and I have postReducer and authReducer and respective actions. When I use componentDidMount() lifecycle method for the first render when the users go their own profile page it shows info about them and their own data. But upon typing someone else's username on the URL I get errors like cannot read property 'props' of undefined. What would be a good strategy for me to go with? Any help would be appreciated. My code for Profile component:

class Profile extends Component {
    //component state and render method are removed to make some space

    componentDidMount() {
        this.props.getUserPosts(this.props.profile.username);
    }
}

const mapStateToProps = (state) => {
    return {
        auth: state.firebase.auth,
        profile: state.auth.profile,
        profileError: state.auth.profileError,
        userPosts: state.post.userPosts,
        userError: state.post.userError
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        getUserPosts: (username) => {
            dispatch(getUserPosts(username));
        },
        getProfile: (username) => {
            dispatch(getProfile(username));
        }
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Profile);

"upon typing someone else's username on the URL I get messy errors." What errors? Please click the edit link under your question to add this information. — Frank van Puffelen, Mar 10 '20 at 13:36

score 0 · Answer 1 · answered Mar 10 '20 at 10:01

It very much depends on how you setup firebase in your project, but you would just access firestore according to their documentation. I have written a small (as small as it could be I belive) example to another question: Firebase listener with React Hooks

You are more than welcome to grap some inspiration from it.

Retrieveing data from firestore based on url

1 Answers1