Reactjs 基于url从firestore检索数据

我试图使用基于URL内容从firestore获得的数据呈现配置文件页面。

---

例如，当用户键入

mywebsite/profile/someusername

时，我想从firestore数据库检索配置文件信息并呈现

profile

组件。我有一个redux存储，它保存应用程序的状态，我有

postReducer

和

authReducer

以及相应的操作。当我使用

componentDidMount（）

lifecycle方法进行第一次渲染时，当用户转到他们自己的配置文件页面时，它会显示关于他们和他们自己数据的信息。但在URL上键入其他人的用户名时，我会出现一些错误，如

无法读取未定义的属性“props”。对我来说，什么是一个好的策略？任何帮助都将不胜感激。
Profile
组件的我的代码：

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);

这在很大程度上取决于您在项目中如何设置firebase，但您只需根据firestore的文档访问firestore即可。我已经为另一个问题写了一个小例子（我相信尽可能小）：

非常欢迎您从中获得一些灵感。
“在URL上键入其他人的用户名时，我会发现一些混乱的错误。”什么错误？请单击问题下的编辑链接添加此信息。